Skip to main contentSkip to docs navigation
View on GitHub

Icons

Guidance on using Chassis Icons — the companion icon library — and alternative icon sets with Chassis CSS.

On this page

Chassis CSS does not include an icon set by default. Chassis Icons is the companion icon library for Chassis-based projects, generating icon fonts, SVG sprites, and individual optimized SVG files from a set of SVG source glyphs. SVG implementations are preferred over icon fonts for vector fidelity and accessibility.

Chassis Icons

Chassis Icons converts source SVG glyphs into distribution assets: an icon font (WOFF and WOFF2), an SVG sprite, individual optimized SVG files, and CSS and SCSS stylesheets. Install the package from npm to access all formats:

Shell
npm install @chassis-ui/icons

The generated files in node_modules/@chassis-ui/icons/icons/ should be copied or served via a bundler. The paths in the examples below assume assets have been placed in a public assets/icons/ directory.

Icon font

The icon font renders icons via a CSS ::before pseudo-element. Include chassis-icons.css and apply .cx-{icon-name} to an <i> or <span> element. Icon names follow a {name}-{style} convention where style is outline or solid.

HTML
<link rel="stylesheet" href="/assets/icons/chassis-icons.css">

<i class="cx-home-solid"></i>
<i class="cx-arrow-right-outline"></i>

For icons that convey meaning rather than decoration, add aria-label to the element or provide accompanying visually-hidden text.

SVG sprite

The SVG sprite packages all icons as <symbol> elements in a single chassis-icons.svg file. Reference icons with <use> and control dimensions via width and height attributes.

HTML
<svg width="24" height="24">
  <use href="/assets/icons/chassis-icons.svg#home-solid"></use>
</svg>

The symbol ID matches the icon filename without its .svg extension. SVG sprites inherit the element's current CSS color as fill.

Individual SVGs

Optimized individual SVG files ship in the svgs/ directory of the package. Embed them as images when neither the icon font nor the sprite is practical.

HTML
<img src="/assets/icons/svgs/bell-outline.svg" alt="Notifications" width="24" height="24">

Alternatives

These icon sets have been evaluated for use alongside Chassis CSS and all ship SVG formats.

More options

These icon sets have not been formally evaluated against Chassis CSS but all include SVG support.