# 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

1. **Stroke-only, thin.** 1px or 1.5px. Color: `--on-surface` (#383831). No fills on the main silhouette.
2. **Graphite character.** The line should feel drawn, not perfectly mechanical — slight variation is welcome; pure geometric precision is not.
3. **Runic overlay.** Pair the human mark with one or two angular line-work elements (triangles, diamonds, vertical strokes) that feel Norse in origin.
4. **Pigment accents only as small details.** A single conceptual element inside the icon may carry a flat Archival Pigment fill — never the whole mark.
5. **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.

```html
<!-- 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.