Skip to content
Get All-Access
General

Icons

Every WunderUI component, block and template draws its icons from . Components do not care where an icon comes from: anything that renders an inherits its colour and size, so you can bring Hugeicons or another set for your own screens.

Lucide by default

The documentation, the UI Blocks, the templates and the Figma library use Lucide: 24 px grid, rounded line icons that follow the text colour (). The few glyphs a component draws itself, such as the chevron of a Select, the check of a Checkbox or the cross of a Dialog, are Lucide too and stay that way whatever you pass in.

bash
npm install lucide-react

Icons inside components

Put the icon next to the label and mark which side it is on. The component adjusts its padding so the icon and the label sit evenly:

bash
import { Plus } from "lucide-react"

<Button>
  <Plus data-icon="inline-start" />
  New project
</Button>

Size icons with the spacing scale ( in buttons and menu items, in navigation and cards), not with a fixed pixel size, and let them take the text colour. The same pattern works for any icon component that forwards and the attribute to its .

Using Hugeicons

Hugeicons works in the same places. The free package is MIT licensed and has about 5,000 icons in one style, Stroke Rounded; the paid Pro package has more styles and its own license, which WunderUI does not cover.

bash
npm install @hugeicons/react @hugeicons/core-free-icons
bash
import { HugeiconsIcon } from "@hugeicons/react"
import { Add01Icon } from "@hugeicons/core-free-icons"

<Button>
  <HugeiconsIcon icon={Add01Icon} data-icon="inline-start" className="size-4" strokeWidth={1.5} />
  New project
</Button>

Hugeicons come as data (the prop) and are rendered by , so wrap the pair once if you use it often:

bash
import { HugeiconsIcon, type IconSvgElement } from "@hugeicons/react"

export function Hi({ icon, ...props }: { icon: IconSvgElement } & React.ComponentProps<"svg">) {
  return <HugeiconsIcon icon={icon} strokeWidth={1.5} {...props} />
}
CheckWhy
Stroke weightCompare it with the Lucide glyphs the components draw themselves and set strokeWidth until the weights match.
ColourDo not hard-code colours on icons. They inherit currentColor, so tokens and dark mode keep working.
LicenceThe Pro pack is a separate paid licence from Hugeicons. Check its terms before it ships in something you resell.

One set per surface

Do not mix two icon sets on one screen: the stroke weight, corner style and optical size differ, and the mismatch reads as a mistake. Pick one set per product surface.