Go Back

Icon Tokens

Icon tokens in a design system encapsulate values essential for standardizing and controlling the appearance of icons.

Icon

Token	Value
icon	ironside-gray-700
icon-hover	ironside-gray-500
icon-secondary	ironside-gray-500
icon-secondary-hover	ironside-gray-700
icon-tertiary	ironside-gray-900
icon-tertiary-hover	ironside-gray-700
icon-quaternary	ironside-gray-400
icon-quaternary-hover	ironside-gray-600
icon-helper	ironside-gray-300
icon-helper-hover	crusta-600
icon-on-fill	white
icon-brand	crusta-900
icon-brand-secondary	crusta-700
icon-brand-secondary-hover	crusta-800
icon-brand-tertiary	crusta-600
icon-brand-tertiary-hover	crusta-800
icon-accent	keppel-900
icon-accent-secondary	keppel-700
icon-accent-secondary-hover	keppel-800
icon-success	emerald-900
icon-success-secondary	emerald-700
icon-success-secondary-hover	emerald-800
icon-success-tertiary	emerald-600
icon-success-tertiary-hover	emerald-800
icon-disabled	black/[0.30]
icon-on-inverse	white
icon-on-inverse-hover	white/[0.70]
icon-on-all-element	white/[0.50]
icon-on-all-element-hover	white/[0.90]
icon-rating	orange-peel-500