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

Overview

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

Icon sizes

Live preview

Icons inherit the surrounding text color and align consistently across supported sizes.

IconExample.tsx
tsx
<Icon name="star" size="sm" />
<Icon name="star" size="md" />
<Icon name="star" size="lg" />
<Icon name="star" size="xl" />

Use familiar symbols to reinforce meaning. Decorative icons should stay hidden from assistive technology; meaningful icons need an accessible label in context.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Icon when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

App.tsx
tsx
import { Icon } from 'omverse-ui'
 
// Basic
<Icon name="heart" />
 
// Sizes: sm · md (default) · lg · xl
<Icon name="heart" size="lg" />
 
// Colored via CSS currentColor — wrap in a colored element
<span style={{ color: 'var(--color-error)' }}>
<Icon name="heart" />
</span>
 
// Filled (solid) state — bookmarks, likes, stars
<Icon name="heart" filled />

Sizes

Live preview

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

App.tsx
tsx
<Icon name="star" size="sm" />
<Icon name="star" size="md" />
<Icon name="star" size="lg" />
<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
// Icon has no color prop — use CSS currentColor via className or a wrapper
<span style={{ color: 'var(--color-text-primary)' }}> <Icon name="heart" /> </span>
<span style={{ color: 'var(--color-primary)' }}> <Icon name="heart" /> </span>
<span style={{ color: 'var(--color-secondary)' }}> <Icon name="heart" /> </span>
<span style={{ color: 'var(--color-success)' }}> <Icon name="heart" /> </span>
<span style={{ color: 'var(--color-warning)' }}> <Icon name="heart" /> </span>
<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
// filled=false (default) → stroke outline
<Icon name="heart" />
<Icon name="star" />
<Icon name="bookmark" />
 
// filled=true → solid shape — use for toggle-on / active states
<Icon name="heart" filled />
<Icon name="star" filled />
<Icon name="bookmark" filled />

All icons

Live preview

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

38 icons

Props / API

Api Props

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