Iconography — Fenja AI

Icons in Fenja are the meeting point between hand-drawn human mark and sharp angular Norse-runic geometry. They are the system's strongest carrier of voice after the serif itself.

Rules

Stroke-only, thin. 1px or 1.5px. Color: --on-surface (#383831). No fills on the main silhouette.
Graphite character. The line should feel drawn, not perfectly mechanical — slight variation is welcome; pure geometric precision is not.
Runic overlay. Pair the human mark with one or two angular line-work elements (triangles, diamonds, vertical strokes) that feel Norse in origin.
Pigment accents only as small details. A single conceptual element inside the icon may carry a flat Archival Pigment fill — never the whole mark.
No filled Material icons. No rounded "friendly" cartoon icons. No emoji in the icon slot. Ever.

Size & spacing

Size	Context
16×16	Inline with label-md, dense tables
20×20	Navigation, form field adornments
24×24	Default UI icon size
32×32	Feature callouts
48×48+	Hero illustrations only

Icons are optically centered on the cap-height of adjacent serif headlines or the x-height of sans body.

Sources — what we use today

Custom (aspirational, not yet shipped)

A bespoke set matching the "graphite + runic" description is the target. None exist in this project yet. This is the biggest open gap in the system.

Substitute library: Lucide

Until the custom set is produced, we use Lucide at 1.5px stroke weight. Reasons: matches our stroke weight, has the thin monoline character closest to what we want, and the Apache-licensed source SVGs are easy to re-skin.

<!-- CDN reference -->
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>

<i data-lucide="feather" class="w-5 h-5" style="stroke: var(--on-surface); stroke-width: 1.5;"></i>

Flag: this is a substitution. We have not yet produced the custom runic set called for in the spec. Most icons will look "correct enough" but will miss the hand-drawn + Norse-runic layering that the brand ultimately requires.

Logos (custom, shipped)

Located in assets/:

fenja-icon-black.svg — the spear mark, charcoal, on light
fenja-icon-white.svg — the spear mark, paper, on dark
fenja-wordmark-black.svg — spear + "Fenja AI" lockup, charcoal
fenja-wordmark-white.svg — spear + "Fenja AI" lockup, paper

Minimum sizes: icon 24×36px, wordmark 96×36px. Maintain clear space equal to the height of the spear-head around all sides.

Unicode as icon — permitted

Typographic glyphs may serve as minimal "icons" in editorial contexts:

Glyph	Use
`—` em-dash	Section breaks, attribution
`§`	Note references
`¶`	Paragraph marker in archive views
`·`	List interpuncts
`↗`	External link
`↳`	Reply / thread descent

Emoji — forbidden

No emoji. Not in empty states, not in CTAs, not in marketing. Use charcoal runic line-work or Archival Pigment flat marks instead.

Data viz glyphs

Axes, gridlines, and tick marks use the Ghost Border (--outline-variant at 15–30% opacity). Data series use Archival Pigments at 70–100% for primary, 20–40% for overlapping fills. No drop shadows, no gradients on chart elements.

3.3 KiB Raw Blame History Unescape Escape