@mirror-physics/fractal-icons

React components for the Fractal icon set — 141 single-color stroke icons, drawn on a 32×32 grid with a uniform 2-unit stroke, designed to stay legible from 16px up.

npm install @mirror-physics/fractal-icons

Usage

import { ArrowLeft, FloppyDisk, MagnifyingGlass } from '@mirror-physics/fractal-icons'

<ArrowLeft size={16} />                    // decorative (aria-hidden by default)
<FloppyDisk size={16} aria-label="Save" /> // meaningful (gets role="img")

• Names are visual primitives (ArrowLeft, FloppyDisk, EyeSlash) — they describe what the icon looks like, never a purpose. The usage context supplies the meaning, so one primitive can serve many purposes.
• size sets width = height. The stroke scales with the viewBox by design, so icons render at 1px stroke @ 16px, 1.5px @ 24px, 2px @ 32px.
• Color comes from CSS color (currentColor).
• Directional variants (ChevronDown, ArrowUp, …) are first-class components, rendered by rotating the base glyph about the icon center.
• Any SVGProps pass through (className, onClick, style, …), and refs forward to the <svg> element.

Raw assets

The unprocessed SVG files and the manifest ship in the package for non-React use:

import manifest from '@mirror-physics/fractal-icons/manifest'
// or: node_modules/@mirror-physics/fractal-icons/icons/svg/arrow-left.svg

Each manifest entry has name, file, functions (a description of what the icon is for — search this by intent when choosing an icon), and variants (rotation-derived directional forms).

Icon style

Stroke/outline only, one color, round caps and joins, fill="none" — quiet, geometric, and precise. Icons are optically sized per shape class (circles run larger than squares) so the set reads at an even visual weight.