ComponentsDisplayIcon

Icon

Lucide icons wrapped in a consistent Icon component. Every component in omverse-ui uses this — swap the underlying source in one file.

38 iconsLucideSearchable4 sizesFilled state

App.tsx

tsx

1import { Icon } from 'omverse-ui'
2 
3// Basic
4<Icon name="heart" />
5 
6// Sizes: sm · md (default) · lg · xl
7<Icon name="heart" size="lg" />
8 
9// Colored via CSS currentColor — wrap in a colored element
10<span style={{ color: 'var(--color-error)' }}>
11  <Icon name="heart" />
12</span>
13 
14// Filled (solid) state — bookmarks, likes, stars
15<Icon name="heart" filled />

Sizes

Live preview

sm · md (default) · lg · xl — tied to the design system spacing scale

App.tsx

tsx

1<Icon name="star" size="sm" />
2<Icon name="star" size="md" />
3<Icon name="star" size="lg" />
4<Icon name="star" size="xl" />

Colors

Live preview

Icon has no color prop — set color via CSS currentColor using a wrapper or className

default

primary

secondary

success

warning

error

App.tsx

tsx

1// Icon has no color prop — use CSS currentColor via className or a wrapper
2<span style={{ color: 'var(--color-text-primary)' }}>   <Icon name="heart" /> </span>
3<span style={{ color: 'var(--color-primary)' }}>         <Icon name="heart" /> </span>
4<span style={{ color: 'var(--color-secondary)' }}>       <Icon name="heart" /> </span>
5<span style={{ color: 'var(--color-success)' }}>         <Icon name="heart" /> </span>
6<span style={{ color: 'var(--color-warning)' }}>         <Icon name="heart" /> </span>
7<span style={{ color: 'var(--color-error)' }}>           <Icon name="heart" /> </span>

Filled state

Live preview

filled renders a solid shape instead of a stroke outline — use for toggle-on / active states

outline

filled

App.tsx

tsx

1// filled=false (default) → stroke outline
2<Icon name="heart"    />
3<Icon name="star"     />
4<Icon name="bookmark" />
5 
6// filled=true → solid shape — use for toggle-on / active states
7<Icon name="heart"    filled />
8<Icon name="star"     filled />
9<Icon name="bookmark" filled />

All icons

Live preview

All 38 registered icons — click any to copy the name to clipboard

38 icons

Props

PropTypeDefaultDescription

nameIconName—Icon identifier — required. Must be one of the 38 registered names.

size'sm' | 'md' | 'lg' | 'xl''md'Icon size

filledbooleanfalseRender as a solid filled shape — use for toggle-on states (liked, saved, starred)

aria-labelstringundefinedAccessible label for screen readers. Omit when the icon is next to visible text.

classNamestringundefinedExtra CSS classes — use to set color via text-* utilities or currentColor