Icon

FoundationTailwindCSS Modules

Size wrapper for SVG or ReactNode icon slots. The library is icon-set agnostic.

Sizes

Installation

Copy component source into your app with the Coloxo CLI (run npx coloxo init --style coloxo-css once per project).

Coloxo CLI
npx coloxo add icon --style coloxo-css

Usage

Import
import { Icon } from "@coloxo/ui";
Icon example
<Icon size="md"><Plus /></Icon>

Props

NameTypeDefaultDescription
size"xs" | "sm" | "md" | "lg" | "xl"mdIcon box size.

Accessibility

Decorative by default (aria-hidden). Pass aria-hidden={false} with a label if the icon is meaningful.

Responsive

Responsive

375 mobile

768 tablet

1024 desktop

1440 desktop