Skip to main content
MACAW

Icon

Atombeta@macaw-ds/icons · since 0.1.0

Renders one icon from the curated set, bound to size and tone tokens. Not for logos or illustrations.

Open gallery

A thin wrapper over a curated Lucide subset. Decorative by default (aria-hidden); pass `label` when the icon carries meaning on its own. The set is deliberately small: adding an icon is a PR with a screenshot of where it is used.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme
Examples
import { Icon } from '@macaw-ds/icons';

<Icon />

Controls

Which icon to render.

size

14, 16, 20 or 24 px. md matches body text; sm matches label-sm.

Colour. inherit takes the surrounding text colour, which is right inside buttons and text.

Accessible name. Only when the icon is the sole content; otherwise leave empty so it stays decorative.

Examples

The named exports of the examples file, rendered as they ship.

  • Icon gallery
    • arrow-up-right
    • arrow-down-right
    • arrow-up
    • arrow-down
    • arrow-left
    • arrow-right
    • trending-up
    • trending-down
    • check
    • check-circle
    • x
    • x-circle
    • alert-triangle
    • alert-circle
    • info
    • help-circle
    • chevron-down
    • chevron-up
    • chevron-left
    • chevron-right
    • chevrons-up-down
    • search
    • filter
    • download
    • upload
    • plus
    • minus
    • more-horizontal
    • more-vertical
    • settings
    • user
    • users
    • building
    • calendar
    • clock
    • credit-card
    • wallet
    • receipt
    • banknote
    • landmark
    • dollar-sign
    • percent
    • refresh
    • copy
    • external-link
    • link
    • eye
    • eye-off
    • lock
    • unlock
    • loader
    • file-text
    • bell
    • home
    • dashboard
    • table
    • mail
    • trash
    • pencil
    • sun
    • moon
  • Icon sizes
  • Icon tones