Icons

Quick Preview

Usage

import { Check, ChevronDown } from "@giddaa-housing/ui/icons";

<ChevronDown className="size-4" />;

Every glyph is a plain SVG drawn on a 0 0 24 24 grid, stroked with currentColor at strokeWidth={2}. The props match the Lucide API — size, strokeWidth, className, and any other SVG attribute — so existing call sites port over unchanged. The set covers exactly what the library renders; reach for a dedicated icon package in your app if you need more.

Share and Filter are the exceptions on both counts: they are Giddaa's own artwork rather than Lucide's, and they are filled rather than stroked, on their own grids (0 0 20 16 and 0 0 14 12). They still size and colour like the rest — each scales inside the same square viewport and keeps its proportions, so strokeWidth is the only prop they ignore.

Examples

Sizing and Colour

Size with a size-* class (which overrides the intrinsic 24) or the size prop, and colour with text-* since the stroke follows currentColor.

<Check className="size-4 text-fg-brand" />
<Check size={12} strokeWidth={3} />

One-off Glyphs

Icon is the bare frame behind every glyph. Use it for artwork that is not in the set but should size and colour like the rest.

import { Icon } from "@giddaa-housing/ui/icons";

<Icon className="size-4">
	<path d="M4 12h16" />
</Icon>;

Props

Accessibility

• Glyphs render aria-hidden="true" by default because they usually sit beside a visible label.
• Pass aria-label when a glyph carries meaning alone; it then renders as role="img" with that name.
• Icon-only buttons should carry the aria-label on the button, leaving the glyph hidden.
• Do not communicate state with an icon alone; pair it with text or helper copy.