@adam-milo/icons

Icon components for the Adam Milo Design System. Built on top of Radix UI Icons.

Installation

npm install @adam-milo/icons

Usage

import { Icon } from '@adam-milo/icons';

// Decorative icon (with text label)
<Icon name="PlusIcon" decorative />

// Standalone icon (requires aria-label)
<Icon name="TrashIcon" aria-label="Delete item" size="lg" />

// Icon with color and size
<Icon name="CheckIcon" color="clickable" size="xl" aria-label="Success" />

Props

name (required)

The name of the icon from Radix UI icons. See available icons.

size

Size variant from design system:

• xs - 12px
• sm - 14px
• md - 16px (default)
• lg - 20px
• xl - 24px
• 2xl - 32px

color

Color variant from design system:

• text (default)
• action
• clickable
• popup
• error
• toggle
• secondary
• system-text
• icon-secondary
• card

decorative

If true, marks the icon as decorative (aria-hidden="true"). Use for icons that are purely visual or accompanied by text.

aria-label

Required for standalone/clickable icons. Omit for decorative icons.

Accessibility

The Icon component automatically handles ARIA attributes based on usage:

// Decorative icon - aria-hidden="true", role="presentation"
<Icon name="StarIcon" decorative />

// Semantic icon - role="img", requires aria-label
<Icon name="WarningIcon" aria-label="Warning" />

Available Icons

All Radix UI icons are available. Common ones include:

• CheckIcon, Cross1Icon, Cross2Icon
• ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, ChevronRightIcon
• PlusIcon, MinusIcon
• InfoCircledIcon, QuestionMarkCircledIcon
• MagnifyingGlassIcon, GearIcon
• And many more...

Direct Icon Import

You can also import Radix icons directly:

import { CheckIcon, Cross2Icon } from '@adam-milo/icons';

<CheckIcon width={16} height={16} />;

TypeScript

Full TypeScript support with exported types:

import type { IconProps, IconName, IconSize, IconColor } from '@adam-milo/icons';

License

MIT