Icon — Overview

@andersseen/icon is a tree-shakeable SVG icon library — 86 icons as plain string constants, plus a tiny global registry that <and-icon> (from @andersseen/web-components) and @andersseen/vanilla-components read from. Framework-agnostic — usable without any other Andersseen package, even to register your own icon set under and-icon-compatible names.

Install

pnpm add @andersseen/icon

Tree-shakeable registration (recommended)

Import and register only the icons you actually use:

import { registerIcons, CLOSE, CHEVRON_DOWN, HOME } from '@andersseen/icon';

registerIcons({ 'close': CLOSE, 'chevron-down': CHEVRON_DOWN, 'home': HOME });

Every icon is also exported as a bare string constant, so you can render it yourself without going through the registry. The two names are mechanically related: the export is UPPER_SNAKE_CASE (CHEVRON_DOWN), the registry key is the same word in kebab-case (chevron-down). The gallery below lists every registry key.

import { STAR } from '@andersseen/icon';
// STAR is a plain string of inner SVG markup — drop it into your own <svg>:
myElement.innerHTML = `<svg viewBox="0 0 24 24" width="24" height="24"
  fill="none" stroke="currentColor" stroke-width="2">${STAR}</svg>`;

Everything at once (demos only)

import { registerAllIcons } from '@andersseen/icon';

registerAllIcons();

Bundles all 86 icons — fine for a demo/dev app (this docs site uses it), but it defeats tree-shaking in a production bundle. Prefer registerIcons() with an explicit map, or COMPONENT_ICONS (the curated subset @andersseen/web-components’s built-in components reference internally):

import { registerIcons, COMPONENT_ICONS } from '@andersseen/icon';

registerIcons(COMPONENT_ICONS);

COMPONENT_ICONS is exactly six entries — the icons the built-in components need to render their own chrome: close, chevron-down, chevron-up, chevron-left, chevron-right, menu. Register at least these if you use @andersseen/web-components without registering everything.

Example

Once registered, reference an icon by its registry name from <and-icon>:

<and-icon name="home"></and-icon> <and-icon name="chevron-down"></and-icon>

See the <and-icon> component page for its full prop reference (name, size, color, stroke-width).

Icon gallery

Every icon currently registered on this page (all … of them). Filter by name:

Registry API

Function	Description
`registerIcons(icons)`	Register a `Record<name, svgInnerMarkup>` map.
`registerAllIcons()`	Register all 86 bundled icons. Demo/dev use only.
`getIcon(name)`	Returns the registered SVG inner markup, or `undefined`.
`hasIcon(name)`	`boolean` — is this name registered?
`getRegisteredIconNames()`	`string[]` of every currently registered name.
`getRegisteredIconCount()`	Number of currently registered icons.

Also exported: ALL_ICONS (the full Record<name, svg> map), COMPONENT_ICONS (the six-icon subset above), and an IconName type (keyof typeof ALL_ICONS | (string & {})) — the loose (string & {}) half lets you pass a custom registered name while still getting autocomplete for the built-ins.

The registry is a single Map on globalThis (or window, under __AND_ICONS_REGISTRY__), so it’s shared across every consumer on the page regardless of which bundle registered a given icon first. Registering the same name again overwrites it — which is how you swap in your own artwork under a built-in name.

Design

Every icon is a plain string of inner SVG markup (<path>/<g> elements, no wrapping <svg>), theme-agnostic — the consuming <and-icon>/<svg> wrapper controls sizing and color via currentColor. Because a name is just a registry key, you’re never limited to the bundled set: registerIcons({ logo: MY_SVG }) makes <and-icon name="logo"> work with your own path data.