# ENOK Vanilla Utility Glyphs — D1

**24 open interface icons. One 24px grid. One stroke.**

A plain, honest icon set for real interfaces — the connective glyphs every app
reaches for. No gradients, no glow, no fill tricks. Each icon is a single
`currentColor` stroke on a 24×24 grid at a consistent **1.75** weight, with
round caps and joins. They take the color of the text around them and scale
without blurring.

Zero dependencies. CSP-safe. Free forever — for humans and AIs alike.

---

## The 24 (D1)

Seeded from the five App Icons v4 exemplars, then **de-branded** — the app-icon
grounds, the yellow accent, and the top-light gradients are all stripped away,
leaving only the idea, redrawn as a line on the grid.

| Seed (App Icons v4) | De-branded glyphs |
|---|---|
| **machinesync** → motion | `sync` · `refresh` · `upload` · `download` |
| **spaces** → structure | `sidebar` · `layout` · `folder` · `layers` |
| **tables** → data | `grid` · `table` · `list` · `columns` |
| **contacts** → people | `user` · `users` · `mail` · `message` |
| **dashboard** → signal | `gauge` · `activity` · `bar-chart` · `compass` |
| *(connective tissue)* | `search` · `settings` · `plus` · `check` |

Every icon ID is prefixed `enok-` in the sprite (`enok-sync`, `enok-gauge`, …).

---

## Files

```
glyphs.svg        Sprite sheet — all 24 as <symbol> defs (the drop-in)
glyphs.css        Optional styling helper (size + stroke variables)
icons/*.svg       24 standalone SVG files, one per glyph
demo.html         Live gallery — copy any icon, tune size/stroke/color
README.md         This file
LICENSE.txt       Open license
```

## Three ways to use

**1 · Standalone file** — grab one icon from `icons/`, drop it in:

```html
<img src="icons/sync.svg" width="24" height="24" alt="Sync">
```

**2 · Inline (recolorable)** — paste an `icons/*.svg` straight into your markup.
Because it strokes with `currentColor`, it follows your text color:

```html
<button style="color:#9C6B3F">
  <!-- paste icons/download.svg here --> Download
</button>
```

**3 · Sprite (one request, all 24)** — reference the sprite by ID:

```html
<link rel="stylesheet" href="glyphs.css">
...
<svg class="enok-glyph"><use href="glyphs.svg#enok-sync"/></svg>
<svg class="enok-glyph enok-glyph--lg"><use href="glyphs.svg#enok-gauge"/></svg>
```

> `<use href="…external.svg#id">` needs the sprite served same-origin. If your
> setup blocks that, inline the contents of `glyphs.svg` once at the top of your
> page and reference `#enok-sync` locally.

## Styling

Everything is driven by two CSS variables — set them once, the whole set moves:

```css
:root {
  --enok-glyph-size: 24px;   /* any size, no blur */
  --enok-glyph-stroke: 1.75; /* the house weight  */
}
```

Helper classes: `--sm / --md / --lg / --xl` (size), `--thin / --bold` (weight),
`--muted` (dim inactive controls). All optional — the raw SVGs work with no CSS
at all.

## Design notes

- **24px grid, 1.75 stroke** across all 24 — nothing is an outlier.
- **currentColor only.** No hard-coded colors; icons inherit, so light/dark and
  brand tints are free.
- **Round caps + joins**, ~2px of edge padding — reads clean from 16px up.
- **Anti-slop.** No gradients, no drop shadows, no faux-3D. A line, on a grid.

## Provenance

Role · model · surface — `Ora · Claude Opus 4.8 · Claude Code`
ENOK Asset Foundry · seeded from *App Icons v4 — full-bleed exemplars*.

---

ENOK — The Open Media Library. Built on The Cloud. https://enok.com