ClearKit Icon Packages

Icons for consumption by applications that implement ClearKit.

Adding new icons

1. Icons are created in the ClearKit Figma library and exported as SVGs. The design team is responsible for this process.
2. Once developer has prepared SVG files from design, then add the SVG file(s) to correct directory inside /packages/icons/icons/* most icons should be added to /glyphs, unless it is a Nav, Service, or Identity icon.
3. Run yarn setup and yarn start:docs to verify that icon displays properly
4. Create a pull request and label with "minor" label
5. Once CI passes, share the Netlify preview link with designer to verify that the icon meets expectations

Glyphs

• Created on an 18x18 grid
• Paths should be flattened (unless the glyph should support multi-path)
• Any fill on exported paths will be stripped in the build process

Multi-path glyphs

Certain glyphs that require multiple fills e.g. an icon with a badge or foreground element, can be exported with multiple paths. When this is done the exported <path> elements should be given class names so they can be targeted in CSS.

Give each <path> a class attribute as follows -

• Assign base to the path that makes up the base of the glyph
• Assign modifier to the path that is intended to take a different fill

By default, all path elements will still receive fill="currentColor" so can still be rendered with a single color.

Nav

• Created on a 22x22 grid
• Paths should be flattened
• Any fill on exported paths will be stripped in the build process

Services

• Created on a 26x26 grid
• Icons should be exported with their intended fills
• All fill attributes will be preserved in the build process

Identity

• Created on a 72x72 grid
• Icons should be exported with their intended fills
• All fill attributes will be preserved in the build process