quikoraA design token is a shared decision you can apply across many components. Icons benefit from tokens because tiny inconsistencies become obvious when the same symbols appear in menus, buttons, forms and cards. The aim is not to define a token for every icon; it is to reduce unnecessary variations.
Start with five shared decisions
Define default size, compact size, large size, icon-to-text gap and foreground color. Add a stroke-width token only when your chosen icon collection supports consistent adjustments. Some filled or multicolor assets should not inherit global stroke settings.
:root {
--icon-size-sm: 1rem;
--icon-size-md: 1.25rem;
--icon-size-lg: 1.5rem;
--icon-text-gap: 0.5rem;
--icon-color: currentColor;
}
.ui-icon { width: var(--icon-size-md); height: var(--icon-size-md); flex: none; }
.button-content { display: inline-flex; align-items: center; gap: var(--icon-text-gap); }
This creates a compact scale instead of allowing random 17px, 19px, 23px and 27px values to accumulate.
Document states as well as sizes
The same search icon may appear in a normal, hovered, focused and disabled button. Decide whether the icon inherits its container color, stays a fixed color, or changes alongside text. An active navigation item must have a second cue beyond color or fill. Record which state is conveyed by the control and which properties affect only the artwork.
Name things by meaning
Prefer functional component names such as search-action, download-action and account-navigation in your design documentation. A decorative filename like circle-arrow-7-final.svg may describe the drawing but not its purpose. Keep the original library name and author information alongside internal aliases; renaming does not change licensing duties.
Define exception rules
Brand logos and emoji artwork commonly require original colors and proportions. Treat those as exceptions, not as icons to recolor indiscriminately. Place exceptions in one documented list so that contributors know when currentColor is inappropriate.
Validate with a real screen
Build a single reference screen containing a form field, empty state, navigation bar and toolbar. Apply the same tokens everywhere, then inspect alignment and recognition. If one context repeatedly needs overrides, adjust the component or token taxonomy, not each SVG individually.
Read sizing and spacing for dimensions and consistent icon systems for selecting a family.