Icon

A versatile icon component supporting SVG children, multiple variants, sizes, colors, and shapes. Useful for displaying icons with consistent styling, backgrounds, and accessibility in your UI.

---

Import

import { Icon } from '@odyssee/components';

---

Examples

Basic Icon (Plain SVG)

Code Éditable

Résultat

---

Solid Variant, Primary Color, Circular

Code Éditable

Résultat

---

Outline Variant, Warning Color, Circular

Code Éditable

Résultat

---

Soft Variant, Success Color, Small Size

Code Éditable

Résultat

---

Ghost Variant, Danger Color, Rounded

Code Éditable

Résultat

---

Soft-Outline Variant, Info Color, XL Size

Code Éditable

Résultat

---

Custom Size (width/height)

Code Éditable

Résultat

---

Standalone SVG (no variant, no wrapper)

Code Éditable

Résultat

---

Table des props

Prop	Type	Default	Description
name	string	–	Icon name (for Lucide or custom icon sets, not used if children SVG provided).
children	Pulse.JSX.Element | HTMLElement | HTMLElement[]	–	Custom SVG or icon element(s) to render.
size	"xs" | "sm" | "md" | "lg" | "xl" | "2xl"	"md"	Predefined icon size.
width	number | string	–	Custom width (overrides size).
height	number | string	–	Custom height (overrides size).
color	"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark"	"primary"	Icon color (applies Tailwind color classes).
variant	"solid" | "outline" | "ghost" | "soft" | "soft-outline"	–	Visual style variant (background, border, or plain).
shape	"square" | "rounded" | "circular"	"rounded"	Shape of the icon background/wrapper.
strokeWidth	number	–	Stroke width for outline icons.
fill	boolean	false	If true, fills the SVG with color (for solid icons).
containerClassName	string	–	Additional CSS classes for the wrapper element (if variant/shape is used).
className	string	–	Additional CSS classes for the SVG element.
id	string	auto-generated	HTML id attribute.
style	string	–	Inline styles.

---

Implementation Notes

• SVG Support:
  Pass any SVG as a child to <Icon>. The component will apply sizing, color, and accessibility attributes automatically.
• Variants:
  • solid: colored background, white icon.
  • outline: border and colored icon.
  • ghost: icon only, no background.
  • soft: subtle background, colored icon.
  • soft-outline: soft background with border.
• Shape:
  • square: no rounding.
  • rounded: medium rounding (default).
  • circular: fully rounded (circle).
• Size:
  Use size for standard sizes or width/height for custom pixel values.
• Color:
  Uses Tailwind color classes for background, border, and icon color.
• Standalone Mode:
  If no variant is provided, the SVG is rendered as-is, with only minimal sizing and color classes.
• Accessibility:
  The icon is marked aria-hidden="true" by default. For decorative icons, this is correct. For meaningful icons, add appropriate ARIA attributes outside the Icon component.

---

Accessibility

• The icon is rendered with aria-hidden="true" by default (decorative).
• For icons conveying meaning, provide a label or use aria-label on the parent element.
• SVGs are sized and colored for sufficient contrast.
• Keyboard navigation is not required for decorative icons.

---

Best Practices

• Use the variant, color, and shape props for consistent icon styling across your app.
• For accessibility, do not use icons alone to convey important information—add text or ARIA labels as needed.
• Prefer SVG children for maximum flexibility and scalability.
• Use size for standard sizing, or width/height for custom icon dimensions.
• Test icons in both light and dark modes for visual consistency.

---

Related

• Lucide Icons
• Tailwind CSS Colors
• Pulse Framework
• MDN: Using SVG

---