@clearkit/icons

ClearKit Icon Packages

Icons for consumption by applications that implement ClearKit.

Adding new icons

• Icons are created in the ClearKit Figma library and exported as SVGs. The design team is responsible for this process.
• 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.
• Run yarn setup and yarn start:docs to verify that icon displays properly
• Create a pull request and label with "minor" label
• 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