Icons

@signicat/catnip-icons provides the icon font for CSS usage and exports SVG assets. Use it when you need font-based icons or to export SVGs for design tools.

Icon library

Browse all available icons in the Icons assets page.

Install

npm install @signicat/catnip-icons

Import

@import "@signicat/catnip-icons";

Font usage

After importing the styles, use the .catnip-icon--{iconName} class. Icon names match the SVG filename without extension (use kebab-case).

<i class="catnip-icon--user"></i>
<i class="catnip-icon--check"></i>
<i class="catnip-icon--settings"></i>

Icons inherit color via currentColor. When the icon font is loaded through the main @signicat/catnip-css stylesheet, glyphs with a .catnip-icon--{iconName} class default to 24px. Control their size explicitly with font-size when another size is required:

.my-icon {
  font-size: 24px;
}

The default size is scoped to Catnip icon classes. A plain semantic <i> element remains ordinary italic text and inherits its surrounding typography:

<p><i>Italic text</i></p>

Do not use a bare <i> as an icon. Always add the documented .catnip-icon--{iconName} class.

SVG export

The package exports SVG files for use in design tools. Check the package svg/ directory or @signicat/catnip-icons/svg for the icon map and filenames.