Icons

Use less. Customize more.

Copy an icon’s SVG, or package only the symbols your interface uses. Interface icons share a canvas, stroke weight, and rounded joins. Brand logos retain their original shapes. Color follows your theme automatically.

Icon manifest · Drawing & AI guide

Status symbols

Every status has a plain symbol. Circles enclose warning, error, info, check, and help. The triangle signals warning; shields are reserved for warning and verification. Search success, question, or exclamation to find the same symbols. Use explicit names such as warning-circle or info-plain in new code. Existing warning and info names keep their original triangle and circle shapes.

Ship only what you use

Run this optional Rust tool from the project root. It validates the collection and emits only the requested symbols, including semantic aliases.

printf '%s' '{"manifest":"production/public/icons/manifest.json","names":["search","close","arrow-right"],"output":"production/public/icons/project.svg"}' | ./layout icon-sprite --json

Then reference a symbol from your same-origin sprite. The generated file is optional; inline SVG needs no packaging step.

<button class="btn" type="button" aria-label="Close dialog">
  <svg class="icon" aria-hidden="true" focusable="false">
    <use href="/icons/project.svg#close"></use>
  </svg>
</button>

Give AI a drawing brief

Add a bookmark icon to our outline family.
Read icons/GUIDE.md and icons/manifest.json first.
Match the search and folder reference drawings.
Use a 24px canvas, 1.75px stroke, and round joins.
Register the icon, source, license, and semantic name.
Run ./layout check-icons --json, then ./layout generate-icon-gallery --write --json.
Review at 16, 20, and 24px in light and dark themes.

Replace the artwork, keep the meaning

A project-local manifest can map the same semantic names to another family. Normalize imported SVGs to the drawing contract, retain their license and source, and review them visually. Outline and solid are separate families; a matching canvas alone does not guarantee a matching style.

Run printf '%s' '{"manifest":"path/to/manifest.json"}' | ./layout validate-icons --json to validate a replacement set. Rebuild selected sprites or update copied inline SVGs after changing artwork.

Brand logos

The Brands category contains monochrome logos that follow your text color. Brand artwork keeps its original geometry and is separate from the soft outline family. Source and license details are listed in the manifest; the Simple Icons license accompanies these assets. Logos identify their owners and do not imply endorsement.

Accessible by default, when used correctly

Hide decorative icons from assistive technology and keep visible text beside actions. An icon-only button needs an accessible name on the button. Meaningful standalone artwork needs its own accessible name. Never rely on color or an icon alone to convey status.

Validation checks the supported SVG structure and drawing attributes. It does not replace visual, keyboard, or screen-reader review. Imported icons retain their own licensing requirements.