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-outlineBrowse icons at Iconify.
Options
--name
Type: string
Custom component name for the icon.
denji add lucide:star --name FavoriteStarGenerated 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-runUseful 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:checkAdd multiple icons:
denji add lucide:check lucide:x mdi:homeCustom name:
denji add lucide:star --name FavoriteStarWith accessibility:
denji add lucide:info --a11y imgDry run (preview only):
denji add lucide:check lucide:x --dry-runIcon Naming
Icons are converted to PascalCase component names:
| Iconify ID | Component Name |
|---|---|
lucide:check | Check |
mdi:home-outline | HomeOutline |
lucide:arrow-right | ArrowRight |
Use --name to override default naming.
How It Works
- Fetches SVG from Iconify API
- Optimizes SVG (removes unnecessary attributes)
- Converts to framework component
- Adds to icons file
- Runs
postAddhooks (if configured)
Icons are deduplicated. Adding the same icon twice updates the existing one.