@atlantum/icons

@atlantum/icons

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

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, CloseIcon, ChevronDownIcon } from "@atlantum/icons";

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

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"
<CloseIcon />                          // aria-hidden (decorative)

Available Icons

Component	Usage context
ArrowRightIcon	Navigation, next actions
CheckIcon	Confirmation, selection
CheckCircleIcon	Success state
ChevronDownIcon	Dropdown, accordion
ChevronLeftIcon	Back navigation
ChevronRightIcon	Forward navigation
ChevronUpIcon	Collapse, scroll up
CloseIcon	Dismiss, remove
InfoCircleIcon	Informational state
SearchIcon	Search input
WarningCircleIcon	Warning state (circle)
WarningTriangleIcon	Warning state (triangle)

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} />;
}

Custom icons via IconBase

Build your own icons with the same props interface:

import { IconBase } from "@atlantum/icons";
import type { IconBaseProps } from "@atlantum/icons";

export function StarIcon(props: IconBaseProps) {
  return (
    <IconBase {...props}>
      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 21 12 17.77 5.82 21 7 14.14 2 9.27l6.91-1.01L12 2z" />
    </IconBase>
  );
}

IconBaseProps

Extends SVGProps<SVGSVGElement>:

Prop	Type	Default	Description
size	IconSize	"base"	Controls width and height
label	string	—	Sets role="img" and aria-label; omit for decorative icons

Changelog

See CHANGELOG.md for the full version history.

License

MIT