Enact / Brand System / Wave 3

Icon library

Sixteen line icons at 24×24 native. Geometric, 1.5px stroke, round caps. Inherit color from CSS via currentColor so they pick up Carbon, Paper, or any other palette member from context. Reference register: Lucide and Heroicons in build, Linear in restraint.

2026-04-26Wave 3a · 16 SVGs
01

Catalog

All sixteen icons at 32px on Paper. Click any to open the source SVG. File paths shown in mono below each glyph for direct import.

Library
Library
library.svg
Make new
Make new
plus.svg
Paste link
Paste link
link.svg
YouTube source
YouTube
youtube.svg
PDF source
PDF
pdf.svg
Article source
Article
article.svg
Eval harness
Eval
eval.svg
Anthropic key
Key
key.svg
Settings
Settings
settings.svg
Search
Search
search.svg
Filter
Filter
filter.svg
Edit
Edit
edit.svg
Delete
Delete
trash.svg
Check
Check
check.svg
Clock
Clock
clock.svg
Arrow right
Arrow right
arrow-right.svg
02

Scale

Each icon designed at 24×24 native. Holds at 16, 20, 24, 32, 48 px. Below 16, line weight collapses — switch to a filled shape instead. Settings icon shown for reference.

48 pxDisplay / hero
32 pxTouch target
24 pxDefault
20 pxCompact UI
16 pxInline label
03

Color treatments

Icons inherit color from CSS via currentColor. Same SVG file renders Carbon on Paper, Paper on Carbon, Carbon on Signal — change the parent color, the icon follows.

Carbon on Paper
Carbon on Mist
Paper on Carbon
Carbon on Signal

How color inheritance works

Every icon SVG uses stroke="currentColor" instead of a fixed color. In CSS, set color on the parent — the icon picks it up. One file, every color.

Inline use: <span style="color: var(--carbon)"><svg ...></svg></span>

For dark grounds

The viewer page above uses CSS filter: invert(100%) as a quick demo. For production, inline the SVG and inherit color via currentColor — that's the correct path.

04

In context

How the icons read inside actual product chrome. Buttons, pills, inputs, navigation. Mono pill with Signal background is the canonical "fired" treatment; line icon in dark button is the canonical CTA.

Primary CTAMake a new skill
Status pillFired skill state
Fired 14:02 Yesterday Not yet
Search inputLibrary search
Sidebar navApp library navigation
Source labelSkill source type
YouTube · 12m PDF · 22 pages Article · 8 min
Row actionsSkill row inline controls
05

Build notes

Conventions for adding new icons to the library. Same stroke weight, same caps, same viewBox as the existing sixteen.

Specs

viewBox: 0 0 24 24 — non-negotiable. Keeps the system consistent.

Stroke: currentColor, weight 1.5, linecap="round", linejoin="round".

Fill: none by default. Filled accents (e.g. YouTube play triangle) use fill="currentColor".

No internal styles beyond what's needed. Color must come from parent CSS.

What's missing (Wave 3b candidates)

If app surfaces need them: menu (3-line), close (X), copy, external, chevron-down, info, warning, more (3-dot).

Brand-specific (may warrant their own treatment): activation-pulse (animated signal block), cosmo-pixel (16×16 Cosmo glyph at icon scale).