Denji

denji add

Add icons from Iconify

Add icons from Iconify's collection to your project.

Usage

denji add <icons...> [options]

Arguments

icons

Icon identifiers in prefix:name format.

denji add lucide:check mdi:home-outline

Browse icons at Iconify.

Options

--name

Type: string

Custom component name for the icon.

denji add lucide:star --name FavoriteStar

Generated component:

export const Icons = {
  FavoriteStar: (props) => <svg>...</svg>
};

Only works when adding a single icon.

--a11y

Type: "hidden" | "img" | "title" | "presentation" | "false"

Override default accessibility strategy for this icon.

denji add lucide:check --a11y img

--dry-run

Preview what would be generated without writing any files to disk.

denji add lucide:check mdi:home --dry-run

Useful for CI checks or verifying icon names before committing. All validations still run — only the file writes and hooks are skipped.

Examples

Add single icon:

denji add lucide:check

Add multiple icons:

denji add lucide:check lucide:x mdi:home

Custom name:

denji add lucide:star --name FavoriteStar

With accessibility:

denji add lucide:info --a11y img

Dry run (preview only):

denji add lucide:check lucide:x --dry-run

Icon Naming

Icons are converted to PascalCase component names:

Iconify IDComponent Name
lucide:checkCheck
mdi:home-outlineHomeOutline
lucide:arrow-rightArrowRight

Use --name to override default naming.

How It Works

  1. Fetches SVG from Iconify API
  2. Optimizes SVG (removes unnecessary attributes)
  3. Converts to framework component
  4. Adds to icons file
  5. Runs postAdd hooks (if configured)

Icons are deduplicated. Adding the same icon twice updates the existing one.

On this page