04 · Foundations

Iconography

One icon. One style. A diagonal up-right arrow that nudges on hover. Every outbound link, every CTA, every “read more” uses the same shape.

The arrow

Path

M4 12L12 4M12 4H5M12 4V11

Viewbox

0 0 16 16

Stroke

currentColor · 1.5px

Linecap / join

round · round

Default size

14×14 (inline) · 12×12 (small)

File

assets/arrow.svg

<!-- Canonical markup -->
<svg width="14" height="14" viewBox="0 0 16 16" fill="none">
  <path d="M4 12L12 4M12 4H5M12 4V11"
        stroke="currentColor" stroke-width="1.5"
        stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Hover behavior

On hover, the arrow shifts up and to the right: transform: translate(2px, -2px). The transition is 200ms ease. Paired with the pill button, the button fills and the arrow moves together.

Hover me

Hover the button to see the arrow nudge and the button fill.

What to avoid

The rule is strict on purpose: no other icons, no exceptions.

×Unicode arrows (→ ↗ ➜)
×Icon fonts (Lucide, Heroicons, Phosphor)
×Emoji (🚀 ✨ 👉)
×Decorative bullets (•, ▸, ◆)
×Checkmarks or x marks for state
×Social icons inside body content

If a surface seems to need more iconography, it usually needs better typography and spacing instead.

In use

Three common placements:

On a pill

Read

On a text link

View project

On a card

Field notes