The industry has settled on SVGs as the best way to build icons.
In OutSystems, developers have traditionally been forced to choose between SVG quality, Service Studio previews, or easy theming — but never all three.
Introducing Icon Tokens.

Why Icon Tokens?

++ True SVG icons - crisp at any size, resolution-independent, and future-proof.

++ Service Studio previews - what you see is what you ship.

++ CSS-driven theming - change icon color and size using standard CSS.

++ No extra network requests - icons live in CSS tokens and are loaded with your stylesheet.

++ Design-system friendly - icons are defined once and reused everywhere through CSS variables.

Why NOT icon fonts?

-- Rendering inconsistencies - hinting, font smoothing, and alignment vary across platforms.

-- Hard to theme correctly - limited styling control and awkward overrides.

-- Not real SVG - no paths, no strokes, no true scaling.

-- Industry is moving away from them - icon fonts are increasingly considered legacy.

-- Accessibility issues - fonts were never designed for icons.

Why NOT InlineSVG from OutSystemsUI?

-- No Service Studio preview - developers work blind in the editor.

-- Requires runtime JavaScript - extra lifecycle hooks, more moving parts.

-- Harder to standardize - each usage becomes a special case.

Why NOT SVGs as image resources?

-- Extra network requests - each icon is a file fetch.

-- Limited theming - color changes require duplicating assets.

-- Not design-system friendly - hard to centralize and evolve.

-- Less flexible sizing and states - hover, active, disabled states become cumbersome.

In conclusion, Icon Tokens is the current best way to add modern icons to your OutSystems applications!

Note: You may see a TrueChange warning about offline caching after adding an icon.
This is expected when using `url()` and can be safely ignored — the icons are fully offline-safe.