Icon
Icon utilities are used to stylize both svg and font icons to adjust their color and size.
Icons
Icons can be used in both SVG or font format with same .icon class. It loads the icon font by class name if it is an empty span element.
<svg class="icon"><use xlink:href="#info-circle-solid" /></svg>
<span class="icon icon-info-circle-solid"></span>Icon Colors
Use .icon-* classes to adjust icon color
<svg class="icon icon-default"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-alternate"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-primary"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-secondary"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-neutral"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-danger"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-success"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-warning"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-info"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-black"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-white"><use xlink:href="#info-circle-solid" /></svg><span class="icon icon-default icon-info-circle-solid"></span>
<span class="icon icon-alternate icon-info-circle-solid"></span>
<span class="icon icon-primary icon-info-circle-solid"></span>
<span class="icon icon-secondary icon-info-circle-solid"></span>
<span class="icon icon-neutral icon-info-circle-solid"></span>
<span class="icon icon-danger icon-info-circle-solid"></span>
<span class="icon icon-success icon-info-circle-solid"></span>
<span class="icon icon-warning icon-info-circle-solid"></span>
<span class="icon icon-info icon-info-circle-solid"></span>
<span class="icon icon-black icon-info-circle-solid"></span>
<span class="icon icon-white icon-info-circle-solid"></span>Context Colors
Use context colors by their name.
<svg class="icon icon-main"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-subtle"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-slight"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon secondary-icon-main"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon secondary-icon-subtle"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon secondary-icon-slight"><use xlink:href="#info-circle-solid" /></svg>
<span class="vr mx-medium"></span>
<span class="icon icon-main icon-info-circle-solid"></span>
<span class="icon icon-subtle icon-info-circle-solid"></span>
<span class="icon icon-slight icon-info-circle-solid"></span>
<span class="icon secondary-icon-main icon-info-circle-solid"></span>
<span class="icon secondary-icon-subtle icon-info-circle-solid"></span>
<span class="icon secondary-icon-slight icon-info-circle-solid"></span>Reset Color
Icons use --cx-icon-main color by default, add .icon-reset class to paint it to --cx-fg-color.
<div class="info-fg-subtle">
<svg class="icon"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-reset"><use xlink:href="#info-circle-solid" /></svg>
</div>Icon Sizes
Use .icon-* size classes to adjust icon size
<svg class="icon icon-2xsmall"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-xsmall"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-small"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-medium"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-large"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-xlarge"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-2xlarge"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-3xlarge"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-4xlarge"><use xlink:href="#info-circle-solid" /></svg><span class="icon icon-2xsmall icon-info-circle-solid"></span>
<span class="icon icon-xsmall icon-info-circle-solid"></span>
<span class="icon icon-small icon-info-circle-solid"></span>
<span class="icon icon-medium icon-info-circle-solid"></span>
<span class="icon icon-large icon-info-circle-solid"></span>
<span class="icon icon-xlarge icon-info-circle-solid"></span>
<span class="icon icon-2xlarge icon-info-circle-solid"></span>
<span class="icon icon-3xlarge icon-info-circle-solid"></span>
<span class="icon icon-4xlarge icon-info-circle-solid"></span>Responsive Utilities
Chassis CSS provides responsive icon size utilities that adapt to different breakpoints. Enable this feature through the $enable-adaptive-font-sizes variable, allowing you to control icon sizes across device sizes for optimal visual consistency.
These utilities follow a mobile-first approach, allowing you to stack classes for progressive scaling. Classes use the format icon-{size} for the base size (applying from xsmall and up) and {breakpoint}:icon-{size} for breakpoint-specific sizes (small, medium, large, xlarge, and 2xlarge). Each breakpoint class overrides the previous icon size at that breakpoint and larger viewports.
<svg class="icon icon-small medium:icon-large xlarge:icon-4xlarge"><use xlink:href="#info-circle-solid" /></svg>
<span class="icon icon-small medium:icon-large xlarge:icon-4xlarge icon-info-circle-solid"></span>With Text
Same icon & text sizes align properly.
<div class="font-small">
<svg class="icon icon-small"><use xlink:href="#info-circle-solid" /></svg>
Text with a leading SVG icon.
</div>
<div class="font-small">
<span class="icon icon-small icon-info-circle-solid"></span>
Text with a leading font icon.
</div>
<div class="font-2xlarge">
<svg class="icon icon-2xlarge"><use xlink:href="#info-circle-solid" /></svg>
Text with a leading SVG icon.
</div>
<div class="font-2xlarge">
<span class="icon icon-2xlarge icon-info-circle-solid"></span>
Text with a leading font icon.
</div>You can also use .icon-adaptive class to match font-size.
<div class="font-small">
<svg class="icon icon-adaptive"><use xlink:href="#info-circle-solid" /></svg>
Text with a leading SVG icon.
</div>
<div class="font-small">
<span class="icon icon-adaptive icon-info-circle-solid"></span>
Text with a leading font icon.
</div>
<div class="font-2xlarge">
<svg class="icon icon-adaptive"><use xlink:href="#info-circle-solid" /></svg>
Text with a leading SVG icon.
</div>
<div class="font-2xlarge">
<span class="icon icon-adaptive icon-info-circle-solid"></span>
Text with a leading font icon.
</div>Opacity
Using CSS variables for icon utilities allows for real-time color changes without compilation and dynamic alpha transparency changes.
How it works
Consider our default .icon-primary utility.
.icon {
color: var(--cx-icon-color);
fill: var(--cx-icon-color);
}
.icon-primary {
--cx-icon-color: oklch(from var(--cx-primary) l c h / var(--cx-icon-opacity, 1));
}
.icon-opacity-50 {
--cx-icon-opacity: var(--cx-opacity-50);
}
We use the --cx-primary CSS variable directly with CSS relative color syntax, and attach a second CSS variable, --cx-icon-opacity, for the alpha transparency (with a default value 1). The oklch(from ...) expression derives the color from the variable and applies the opacity channel. Then, the opacity class overrides the default opacity by setting --cx-icon-opacity on the element.
Example
To change that opacity, override --cx-icon-opacity via custom styles or inline styles, or choose from any of the .icon-opacity-* utilities:
<svg class="icon icon-secondary"><use xlink:href="#info-circle-solid" /></svg>
<svg style="--cx-icon-opacity: .6;" class="icon icon-secondary"><use xlink:href="#info-circle-solid" /></svg>
<span class="vr mx-medium"></span>
<svg class="icon icon-secondary icon-opacity-100"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-secondary icon-opacity-75"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-secondary icon-opacity-50"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-secondary icon-opacity-25"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-secondary icon-opacity-10"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-secondary icon-opacity-0"><use xlink:href="#info-circle-solid" /></svg>Context Opacity
You can directly apply a context opacity utility to match fg-* colors:
<svg class="icon icon-secondary"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-secondary icon-opacity-subtle"><use xlink:href="#info-circle-solid" /></svg>
<svg class="icon icon-secondary icon-opacity-slight"><use xlink:href="#info-circle-solid" /></svg>
<span class="vr mx-medium"></span>
<span class="icon icon-secondary icon-info-circle-solid"></span>
<span class="icon icon-secondary icon-opacity-subtle icon-info-circle-solid"></span>
<span class="icon icon-secondary icon-opacity-slight icon-info-circle-solid"></span>CSS
This component can be customized using CSS variables, allowing for styles to be modified dynamically on the page. These CSS variables are part of Chassis CSS's design token system, giving design teams control over component appearance. See the design tokens page for more details.
Custom properties
These CSS variables control the component's appearance and can be modified dynamically on the page. Components use cascading variables, allowing seamless variations in size, color, and style without redundant style declarations through component inheritance and the context class system.
Sass variables
These Sass variables are also exposed as CSS custom properties using the --cx-
prefix. A Sass variable $variable-name becomes available as --cx-variable-name in CSS, allowing for styles to be modified dynamically on the
page. See the
context components
page for more details.
$icon-4xlarge: $cx-size-icon-glyph-4xlarge;
$icon-3xlarge: $cx-size-icon-glyph-3xlarge;
$icon-2xlarge: $cx-size-icon-glyph-2xlarge;
$icon-xlarge: $cx-size-icon-glyph-xlarge;
$icon-large: $cx-size-icon-glyph-large;
$icon-medium: $cx-size-icon-glyph-medium;
$icon-small: $cx-size-icon-glyph-small;
$icon-xsmall: $cx-size-icon-glyph-xsmall;
$icon-2xsmall: $cx-size-icon-glyph-2xsmall;
$icon-3xsmall: $cx-size-icon-glyph-3xsmall;
$icon-size: $icon-medium;
Sass Maps
Icon utilities are generated from Sass maps using utilities API.
$icon-sizes: (
"4xlarge": $icon-4xlarge,
"3xlarge": $icon-3xlarge,
"2xlarge": $icon-2xlarge,
"xlarge": $icon-xlarge,
"large": $icon-large,
"medium": $icon-medium,
"small": $icon-small,
"xsmall": $icon-xsmall,
"2xsmall": $icon-2xsmall,
"3xsmall": $icon-3xsmall,
);
$icon-opacities: map-merge(
$basic-opacities,
(
"subtle": $opacity-icon-subtle,
"slight": $opacity-icon-slight,
)
);
See opacity utility page to learn more about opacities.
Utilities API
Icon utilities are generated using utilities API.
"icon-color": (
css-var: true,
css-variable-name: icon-color,
class: icon,
values: map-merge(
map-loop($context-colors, opacity-var, #{"$key"}, #{"icon"}),
( "transparent": transparent )
)
),
"context-icon-color": (
css-var: true,
css-variable-name: icon-color,
// property: (color, fill),
class: null,
values: map-merge-multiple(
map-loop($context-icon-colors, varify, "$key"),
map-loop($body-icon-colors, varify, "$key"),
("icon-reset": currentColor)
)
),
"icon-opacity": (
css-var: true,
css-variable-name: icon-opacity,
class: icon-opacity,
values: $icon-opacities
),
// "icon-size": (
// css-var: true,
// css-variable-name: icon-size,
// class: null,
// values: map-loop(map-rename-keys($icon-sizes, "icon-", "start"), varify, "$key")
// ),