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.
When to use
Do
- ✓Use icons from the Lucide library for visual consistency.
- ✓Use icons as a supplementary element alongside text for faster recognition.
- ✓Provide a descriptive label via the label prop when the icon carries meaning on its own.
- ✓Keep icons at a size that ensures clarity — 24px is the standard baseline.
- ✓Use currentColor so the icon inherits the surrounding text color.
Don't
- ✕Don't use icons as the sole communication for critical actions — pair them with a label.
- ✕Don't use icons smaller than 16px; they become illegible and hard to interact with.
- ✕Don't use icons with ambiguous metaphors — clarity always wins over novelty.
- ✕Don't rely on color alone to convey icon meaning; ensure contrast and context.
- ✕Don't mix icon styles or sources — stick to Lucide for visual cohesion.
Sizing guidelines
| Size | Use case |
|---|---|
| 16px | Inline with small body text, badges, compact UI elements. |
| 20px | Secondary actions, input prefix/suffix icons, list items. |
| 24px | Default. Buttons, navigation items, general purpose. |
| 32px | Prominent actions, section headings, empty states. |
| 48px | Hero sections, large decorative use, feature highlights. |
Icon with text
Icons work best when they reinforce a text label. Place icons before the label for actions (e.g. in buttons) or after for navigation cues (e.g. external-link indicators). Use display: inline-flex; align-items: center; gap: 0.5rem to align icon and text on the same baseline.
Custom icons
Diwa uses the Lucide icon library — a consistent, open-source set built on a 24×24 grid with 2px strokes. If you need an icon not in the library, follow these guidelines to maintain visual consistency.
Do
- ✓Check Lucide for a similar icon before creating a new one.
- ✓Stick to basic geometric shapes and universally-understood metaphors.
- ✓Design on a 24×24px artboard — the default Lucide grid, with 2px default stroke.
- ✓Snap all anchor points to the pixel grid for crisp rendering.
- ✓Respect a ~2px safe area inset on all four sides.
- ✓Export as plain SVG with viewBox="0 0 24 24", optimised through SVGO.
Don't
- ✕Don't create custom icons where a Lucide equivalent exists.
- ✕Don't use gradient fills — single foreground colour only.
- ✕Don't include metadata, hidden layers, or clipping masks in the export.
- ✕Don't leave unsnapped anchor points — anti-aliasing will blur the icon.
- ✕Don't use extreme aspect ratios — keep the icon balanced within its box.