Chassis Icons
A repository that a team fills with its SVG files and builds into an icon font, an SVG sprite and optimized SVG files. The icons here are the Chassis defaults.
git clone https://github.com/chassis-ui/icons.gitCurrently v0.4.0-next.0·Releases
Chassis Icons is built from one folder of SVG files. Save a file per icon, run the build, and load the stylesheet or the sprite that it writes. A team that owns the repository builds a set of its own the same way: with its files, its font name and its class prefix.
Save one SVG file per icon into the source folder. The name of the file is the name of the icon.
source/
├── alarm-clock-outline.svg
├── alarm-clock-solid.svg
├── arrow-down-long-outline.svg
└── ...The build optimizes the files and writes the sprite, the icon font and its stylesheets.
# Check the files
pnpm icons:lint:source
# Build the set
pnpm iconsLoad the stylesheet of the icon font in a page or in CSS.
<!-- HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@chassis-ui/icons@0.4.0-next.0/icons/chassis-icons.min.css">/* CSS */
@import url("https://cdn.jsdelivr.net/npm/@chassis-ui/icons@0.4.0-next.0/icons/chassis-icons.min.css");The icons of the Chassis Design System, in outline, solid and brand styles, as an icon font, an SVG sprite and optimized SVG files. The set has 501 icons.
The build writes the set in three forms: an SVG sprite, one SVG file per icon and an icon font. The examples show info-circle-solid, and the page of each icon has the code for that icon. On this site Chassis CSS sizes and colors an element with the class icon.
The sprite holds every icon as a <symbol> whose id is the name of the icon. One request loads the set, a <use> element draws an icon, and the icon takes the color of the text around it.
A <use> element does not load a file from another origin, so serve the sprite from the origin of the page.
<svg class="icon" aria-hidden="true"><use href="/icons/static/set/icons/chassis-icons.svg#info-circle-solid"></use></svg>The SVG file of an icon is an image for the <img> element. An image does not take the color of the text: the icon is black.
<img src="/icons/static/set/svgs/info-circle-solid.svg" alt="" width="24" height="24">The stylesheet of the font has one class per icon, cx-<name>. Load the stylesheet, and put the class on an empty element.
Use font-size and color to change the size and the color of the icon.
<span class="icon cx-info-circle-solid" aria-hidden="true"></span>Chassis CSS styles an element with the class icon, whatever set the icon is of. It reads the size and the color from --cx-icon-size and --cx-icon-color, and its utilities set both.
You can use icon-* classes to change both their size and colors. Put any context color or icon size after.
<svg class="icon" aria-hidden="true"><use href="/icons/static/set/icons/chassis-icons.svg#info-circle-solid"></use></svg>
<svg class="icon icon-info icon-xl" aria-hidden="true"><use href="/icons/static/set/icons/chassis-icons.svg#info-circle-solid"></use></svg>Put .icon-adaptive and.icon-reset to change their values to --cx-font-size and --cx-fg-color.
<h2 class="fg-subtle">
<svg class="icon icon-adaptive icon-reset" aria-hidden="true"><use href="/icons/static/set/icons/chassis-icons.svg#info-circle-solid"></use></svg>
Heading
</h2>Icons color and sizes fit to context and components automatically. Context object color utilities are also available. Put .*-icon-main or .*-icon-subtle classes to change their color ad fill-color properties directly with an !important flag.
Note that, .icon-primary and .primary-icon-main are different colors. While .primary-icon-main using --cx-primary-icon-main color, .icon-primary uses --cx-primary-base-color for its property.
<div class="context secondary p-md">
<svg class="icon" aria-hidden="true"><use href="/icons/static/set/icons/chassis-icons.svg#info-circle-solid"></use></svg>
<svg class="icon icon-subtle icon-md" aria-hidden="true"><use href="/icons/static/set/icons/chassis-icons.svg#info-circle-solid"></use></svg>
<span class="icon cx-info-circle-solid fg-subtle icon-2xl" aria-hidden="true"></span>
<span class="icon cx-info-circle-solid primary-icon-main" aria-hidden="true"></span>
<span class="icon cx-info-circle-solid primary-fg-main icon-xs" aria-hidden="true"></span>
</div>You can also use the SVG within your CSS (be sure to escape any characters, such as # to %23 when specifying hex color values). When no dimensions are specified via width and height on the <svg>, the icon will fill the available space.
The viewBox attribute is required if you wish to resize icons with background-size. Note that the xmlns attribute is required.
Note that, it is not possible to change color if SVG used as background-image. A mask-image takes the color of background-color.
.icon-bg::before {
display: inline-block;
content: "";
vertical-align: -.125em;
background-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='%23ff5b14' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-size: 1rem 1rem;
}.icon-mask::before {
position: absolute;
width: 1rem;
height: 1rem;
margin-top: 0;
margin-left: .5rem;
content: "";
background-color: #ff5b14;
mask-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
mask-position: center;
mask-size: 1rem 1rem;
}Icons are a great way to add visual interest to your site, but they can also be a barrier to accessibility if not used correctly. Here are some tips for making sure your icons are accessible to all users.
When using icons as images, it's important to provide an alt attribute that describes the icon's purpose. This is especially important for screen readers, which will read the alt text to users who cannot see the icon.
<!-- alt="..." on <img> element -->
<img ... alt="Example icon" />
When using icons, it's important to provide a text alternative for screen readers. This can be done using the aria-label attribute on the icon itself, or by providing a visually hidden text label that describes the icon's purpose.
<svg class="icon" ... role="img" aria-label="Example icon">
<use href="chassis-icons.svg#info-circle-solid"></use>
</svg>When using icons as decorative elements, it's important to hide them from screen readers. This can be done using the aria-hidden attribute on the icon itself. This tells screen readers to ignore the icon and not announce it to users.
<!-- aria-label="..." on the control -->
<button ... aria-label="Example">
<svg class="icon" aria-hidden="true" ...>
...
</svg>
</button>An SVG icon needs a few attributes in some browsers and with some screen readers. The markup of the examples above leaves them out, so add the ones that a project needs.
SVG elements receive keyboard focus by default in Internet Explorer and Edge Legacy. Add `focusable="false"` to prevent this behavior.
When using <img> elements with SVG sources, screen readers may skip
the image or fail to announce it properly. Include role="img" on the
element.
External SVG sprites using <use> with href attributes
don't work in Internet Explorer. Apply the svg4everybody polyfill if IE support is
required.