@atlantum/icons

@atlantum/icons

SVG icons as tree-shakeable React components for the AtlantumUI design system.

Source of truth: Atlantum-icons (Figma).

Installation

npm i @atlantum/icons
# or
pnpm add @atlantum/icons

Peer dependencies:

npm i react

Usage

Import icons individually — only what you use is included in your bundle:

import { SearchIcon, XIcon, ChevronDownIcon } from "@atlantum/icons";

function SearchField() {
  return (
    <div>
      <SearchIcon size="base" />
      <input type="search" />
      <XIcon size="small" />
    </div>
  );
}

Naming

Layer	Convention	Example
Figma / registry key	kebab-case	triangle-alert, circle-check, x
React component	PascalCase + Icon	TriangleAlertIcon, CircleCheckIcon, XIcon

Sizes

All icons accept a size prop:

Value	px
extraSmall	12
small	16
base	20 (default)
large	24
extraLarge	32

Accessibility

By default icons are decorative (aria-hidden). Pass label to make an icon meaningful:

<SearchIcon label="Search" />          // role="img" aria-label="Search"
<XIcon />                              // aria-hidden (decorative)

Dynamic rendering

Use the icons registry and IconName type when you need to render icons by name at runtime:

import { icons } from "@atlantum/icons";
import type { IconName } from "@atlantum/icons";

function DynamicIcon({ name, ...props }: { name: IconName } & IconBaseProps) {
  const Icon = icons[name];
  return <Icon {...props} />;
}

Importing icons pulls every registered icon into the bundle. Prefer named imports for tree-shaking.

Sync from Figma (maintainers)

FIGMA_ACCESS_TOKEN=figd_... pnpm --filter @atlantum/icons icons:sync

See MIGRATION.md for breaking renames from earlier versions.

Changelog

See CHANGELOG.md for the full version history.

License

MIT