Icon
Icons are a fundamental visual element that aid quick recognition and navigation. Diwa uses the Lucide icon set — a consistent, open-source library built on a 24×24 grid with 2px strokes.
Icon set
A curated selection from the Lucide icon library. The full set is available at lucide.dev/icons.
Sizes
Use the size prop to control dimensions. Available values: 16, 20, 24 (default), 32, 48.
<diwa-icon name="star" size="16" color="currentColor" theme="dark"></diwa-icon>
<diwa-icon name="star" size="20" color="currentColor" theme="dark"></diwa-icon>
<diwa-icon name="star" size="24" color="currentColor" theme="dark"></diwa-icon>
<diwa-icon name="star" size="32" color="currentColor" theme="dark"></diwa-icon>
<diwa-icon name="star" size="48" color="currentColor" theme="dark"></diwa-icon>Decorative icon
When the icon is purely visual, omit the label prop. The component automatically sets aria-hidden="true" so assistive technologies skip it.
<diwa-icon name="info" size="20" color="currentColor" theme="dark"></diwa-icon>Accessible / semantic icon
When the icon stands alone without adjacent visible text, set the label prop. This applies role="img" and aria-label to the SVG.
<diwa-icon name="bell" size="24" color="currentColor" label="Notifications" theme="dark"></diwa-icon>