Key Icon - HapplyUI

An icon container with configurable styles, sizes, and semantic colors.

Installation

bunx @happlyui/cli@latest add key-icon

These are automatically installed when you add this component.

import * as KeyIcon from "@/components/ui/key-icon"

<KeyIcon.Root icon={<RiHomeLine />} />

Default stroke style with neutral border and shadow.

<KeyIcon.Root icon={<RiHomeLine />} />

Lighter style with semantic background and border colors.

<KeyIcon.Root style="lighter" color="blue" icon={<RiSearchLine />} />

Solid background with white icon for high emphasis.

<KeyIcon.Root style="filled" color="blue" icon={<RiSearchLine />} />

Available sizes from sm (32px) to 2xl (64px).

2xl

<KeyIcon.Root size="lg" icon={<RiHomeLine />} />

All available semantic colors in both styles.

gray

blue

orange

red

green

yellow

purple

pink

teal

primary

<KeyIcon.Root style="lighter" color="green" icon={<RiCheckLine />} />

The icon container element.

Prop	Type	Default	Description
`icon`	`React.ReactNode`	-	The icon to display. Alternatively, pass as children.
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`	Container size.
`style`	`'stroke' \| 'lighter' \| 'filled'`	`'stroke'`	Visual style variant.
`color`	`'gray' \| 'blue' \| 'orange' \| 'red' \| 'green' \| 'yellow' \| 'purple' \| 'pink' \| 'teal' \| 'primary'`	`'gray'`	Semantic color. Affects the lighter and filled styles.