Skip to content

The Beta Design System is no longer being updated.

It remains online for reference only. Maintenance, bug fixes, and security updates will continue through July 1, 2026 and are tracked in the Beta GitHub repository.

For active development, head over to California's next design system in our new GitHub repository.

Icons

Development stage

1
In research
2
Alpha
3
Beta
4
Production

Alpha components have not been thoroughly tested by developers. Learn more about component maturity.

Development

  • npm run dev:sprite-some: A utility command for developers to create sprite with a subset of icons. Use a space-separated list to pass icon ids.

  • npm run dev:clear-cache: Regenerates all the assets related to icons and cleares the website design cache.

  • npm run dev:library: Regenerates the icon library.

  • npm run dev:sprite: Regenerates the sprite from individual svgs. You should only have to run this when new versions of the font are released.

  • npm run dev:font-sass: Pipe sass file to design system website.

Design system icon library management

  • The icon library is written to /docs/site/_includes/layouts/icon-library.njk.

  • SVGs and font files are transfered via pass through at /.eleventy.js

  • icon-library.scss is included at docs/src/css/sass/index.scss

  • Component's JS is included at /docs/src/js/sass/index.js';