Icons

5,437 icons from Hugeicons, added one at a time by the CLI and vendored into your project as plain data.

@hugeicons/core-free-iconsv4.2.3MIT

Add an icon

The first run also copies the renderer into lib/hugeicons. Every run after that only appends to the barrel.

Terminal

npx magic-native-ui@latest icon add heart

like-button.tsx

import { Icon, HeartIcon } from '@/lib/hugeicons'

export function LikeButton() {
  return <Icon icon={HeartIcon} size={20} className="text-primary" />
}

Browse the set

Click any icon to copy its add command.

Loading…

From the terminal

Terminal

# search the set from the terminal
npx magic-native-ui@latest icon list arrow

# add several at once — aliases work too ("plus" is "add")
npx magic-native-ui@latest icon add heart star plus

How it works

Nothing is installed

The full package is 6.18 MB. The CLI copies only the icons you name into lib/hugeicons/icons.ts, so your bundle carries the handful you actually draw.

Coloured by className

Every icon strokes with currentColor, and the renderer maps className onto the colour react-native-svg resolves that against — so text-primary works the way it does on the web.

Names match upstream

The export keeps the Hugeicons name (HeartIcon, Add01Icon), so anything you find in their docs is the same symbol here. The CLI takes the kebab-case form, an alias, or the export itself.

lib/hugeicons/icons.ts

// lib/hugeicons/icons.ts — written by the CLI, sorted by export name.
import type { IconSvgElement } from '@/lib/hugeicons/types'

export const HeartIcon: IconSvgElement = [
  ["path", { d: "M10.4107 19.9679C7.58942 17.8581 2 13.035 2 8.69463C2 5.82581…", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5", key: "0" }],
]