Icon Component

Universal icon component that renders Lucide icons by default, with SVG sprite support via iconSource prop. Edlio brand icons (CMS_LEGACY_ICONS) always render from icons-cms-legacy.svg.

Interactive Preview

Live component with different configuration options. Switch between variants and toggle code view.

Component Examples

Select different variants to see how props affect the component behavior

Example:

Preview

Default size (28px)

Props

Component accepts the following props for configuration and behavior.

Prop	Type	Required	Default	Description
name	string	Required	—	Icon name — Lucide kebab-case name, CMS legacy symbol ID
size	number \| string	Optional	24	Icon size in pixels (number) or CSS value (string)
className	string	Optional	''	Additional CSS classes for styling and colors
style	React.CSSProperties	Optional	—	Inline styles object for custom styling
iconSource	'lucide' \| 'edlio-icons'	Optional	'lucide'	Explicit icon source — omit for Lucide (default), pass "edlio-icons" to render from icons-cms-legacy.svg
viewBox	string	Optional	—	SVG viewBox override for edlio-icons rendering; omit to inherit from <symbol>
strokeWidth	number	Optional	2	Stroke width for Lucide icons

Type Definitions

IconProps

Configuration interface for Icon component

interface IconProps {
  name: string
  size?: number | string
  className?: string
  strokeWidth?: number
  style?: React.CSSProperties
  iconSource?: 'lucide' | 'edlio-icons'
  viewBox?: string
}

Usage Examples

Common patterns and implementation examples.

Basic Icon Usage

import { Icon } from '@/components/shared/icon'

// Simple icon
<Icon name="home" />

// With custom size
<Icon name="user" size={32} />

// With styling
<Icon name="cog" className="text-blue-500" />

Icon in Buttons

import { Icon } from '@/components/shared/icon'
import { Button } from '@/components/ui/button'

<Button>
  <Icon name="plus" size={16} className="mr-2" />
  Add New Item
</Button>

<Button variant="outline">
  <Icon name="download" size={16} />
</Button>

Edlio Brand Icons

import { Icon } from '@/components/shared/icon'

// Website branding
<Icon name="edlio_website" size={43} />

// Powered by footer
<Icon name="powered-by-edlio" size={120} />

// Access icons
<Icon name="edlio-access" className="text-blue-600" />

Sprite Icons

import { Icon } from '@/components/shared/icon'

// Opt any icon into edlio-icons rendering
<Icon name="home" iconSource="edlio-icons" />
<Icon name="user" iconSource="edlio-icons" size={32} />

// With viewBox override for non-standard coordinate systems
<Icon name="home" iconSource="edlio-icons" viewBox="0 0 24 24" />

// CMS layout — all menu icons from edlio-icons
renderIcon={(props) => <Icon {...props} iconSource="edlio-icons" />}

View all Blazer icons →