Components

Icon

SVG icon component with theme color and size token support

Overview

A component that renders SVG icons. Supports theme color tokens and size tokens.

Sizes

Size	Value	Use Case
`extraSmall`	12px	Inline icons, inside tags
`small`	16px	Small buttons, inside input fields
`medium`	20px	Default icon size
`large`	24px	Navigation, header icons

Colors

Icon colors use semantic color tokens:

iconDefaultDefault — Default icon
iconDefaultDisabled — Disabled icon
iconDangerDefault — Danger/error icon
iconBrandDefault — Brand icon
iconBrandOnBrand — Icon on brand background

Props

Prop	Type	Default	Required	Description
`name`	`string`	-	Yes	Icon name
`size`	`'extraSmall' \| 'small' \| 'medium' \| 'large'`	`'medium'`	No	Icon size
`color`	`string`	`'iconDefaultDefault'`	No	Theme color token
`rotate`	`number`	-	No	Rotation angle (degrees)
`className`	`string`	-	No	Additional CSS class

Usage

import { Icon } from '@illog/ui'
 
// Basic usage
<Icon name="check" />
 
// With size and color
<Icon name="close" size="large" color="iconDangerDefault" />
 
// Rotation
<Icon name="chevron_down" rotate={90} />
 
// With a button
<Button variant="secondary">
  <Icon name="plus" size="small" />
  Add
</Button>