Iconography
One custom icon family — Cloaked Icon Type — shipped as a web font. Every product glyph lives here, drawn on a 24 px grid with 1.5 px strokes and rounded ends. Outline by default, filled for selected & active states.
Anatomy
Every glyph is drawn on a 24 px canvas with a 20 px keyline. The 2 px gutter keeps icons visually balanced when sitting next to 14–16 px type.
| Canvas | 24 × 24 |
|---|---|
| Keyline box | 20 × 20 (2 px gutter) |
| Stroke | 1.5 px, uniform |
| Caps & joins | Round |
| Corner radius | 2 px on container shapes |
| Color | Inherits currentColor |
| Optical alignment | Metric-centered, nudged to pixel |
Sizes
Pick from the ramp so strokes stay pixel-crisp. 16 and 20 pair with body copy; 24 is the default control size; 32/48 are for emphasis or empty states.
Outline & filled
Use outline for default/inactive; switch to filled for the selected item in a tab bar, an active toggle, or a success state.
All glyphs
Click any tile to copy its class name. Filter by variant to see just the outline or filled set.
Where icons show up
Implementation
Include the font CSS once, then render any icon as a <span> with a matching class. Size and color inherit from the parent — no SVG wrangling.
<!-- once, in <head> --> <link rel="stylesheet" href="fonts/cloaked-icons.css"> <!-- anywhere --> <span class="icon-Shield-Tick"></span> <span class="icon-Home-Filled" style="font-size:24px;color:#FF550C"></span>
Do & don't
Let the icon inherit currentColor and pair with a label when meaning isn't obvious.
Don't apply gradients, drop shadows, or decorative treatments. The icon type is meant to whisper.
Switch from outline to filled for the selected tab, active toggle, or confirmed state.
Don't mix in emoji, third-party icon sets, or rotate glyphs. Stay inside the family.