Icons

Aidash Components uses the HugeIcons free set — over 5,000 line icons rendered as SVG. All icons inherit colour from currentColor, so they theme automatically.

HugeIcons

Import icons from @hugeicons/core-free-icons and render with the HugeiconsIcon component. See hugeicons.com for the full catalogue.

Usage

Import the icon and render it inline. Size and colour flow from the surrounding text by default.

tsx

1import { HugeiconsIcon } from '@hugeicons/react';2import { Search01Icon } from '@hugeicons/core-free-icons';3 4<HugeiconsIcon icon={Search01Icon} size={16} className="text-brand-500" />

Sizes

Convention: 12/14 for chips, 16/18 for buttons, 20/24 for feature callouts.

12px

14px

16px

20px

24px

32px

Colour

Icons inherit currentColor, so a Tailwind text-* class colours them alongside adjacent text.

Foreground

Muted

Brand

Success

Warn

Danger

Common icons

A subset of the icons the design system reaches for most often. Click any tile to copy its import name.

Search icons

Accessibility

Two rules for icons and screen readers.

Decorative icons

When an icon sits next to a text label, mark it aria-hidden="true"so screen readers announce the label once, not twice.

Standalone icon buttons

An icon-only button needs an aria-label. Without it, screen readers have nothing to announce.

Snippet

Both accessibility rules applied together — labelled button, hidden icon.

button-with-icon.tsx

tsx

import { HugeiconsIcon } from '@hugeicons/react';
import { Download04Icon } from '@hugeicons/core-free-icons';

<button aria-label="Download report">
  <HugeiconsIcon icon={Download04Icon} size={16} aria-hidden="true" />
</button>

API

Props accepted by HugeiconsIcon.

Prop	Type	Default	Description
icon	IconSvgElement	—	The icon to render. Import from @hugeicons/core-free-icons.
size	number	24	Icon width/height in pixels.
className	string	undefined	Tailwind or CSS class. Controls colour via currentColor.
style	CSSProperties	undefined	Inline styles.
aria-hidden	"true" \| boolean	undefined	Decorative icons alongside text.
aria-label	string	undefined	Standalone icon-only controls.