Official Icon.dev SDK for React, Vue, Angular and vanilla JavaScript.
icondev.json)npm install icondev
Run the interactive setup wizard:
npx icondev init
You'll be asked for:
pk_)This creates an icondev.json file with your configuration and available icons.
import { Icon } from 'icondev/react'
function App() {
return (
<div>
<Icon name="arrow-right" size={24} />
<Icon name="star" color="gold" className="my-icon" />
<Icon name="heart" size={32} stroke="red" />
</div>
)
}
<script setup>
import { Icon } from 'icondev/vue'
</script>
<template>
<div>
<Icon name="arrow-right" :size="24" />
<Icon name="star" color="gold" class="my-icon" />
<Icon name="heart" :size="32" stroke="red" />
</div>
</template>
'use client'
import { Icon } from 'icondev/react'
export default function Home() {
return <Icon name="arrow-right" size={24} />
}
<Icon
name="icon-slug" // Required: Icon name from your project
size={24} // Optional: Size in pixels or CSS value (default: 24)
color="currentColor" // Optional: Fill color
stroke="currentColor" // Optional: Stroke color
className="my-class" // Optional: CSS classes
style={{ margin: 10 }} // Optional: Inline styles
onLoad={() => {}} // Optional: Called when icon loads
onError={(err) => {}} // Optional: Called on error
/>
import { useIcon } from 'icondev/react'
function MyComponent() {
const { svg, loading, error } = useIcon('arrow-right')
if (loading) return <div>Loading...</div>
if (error) return <div>Error: {error.message}</div>
return <div dangerouslySetInnerHTML={{ __html: svg }} />
}
<Icon
name="icon-slug"
:size="24"
color="currentColor"
stroke="currentColor"
class="my-class"
@load="handleLoad"
@error="handleError"
/>
<script setup>
import { useIcon } from 'icondev/vue'
const { svg, loading, error } = useIcon('arrow-right')
</script>
<template>
<div v-if="loading">Loading...</div>
<div v-else-if="error">Error: {{ error.message }}</div>
<div v-else v-html="svg" />
</template>
import {
loadIcon,
preloadIcons,
getAvailableIcons,
hasIcon,
} from 'icondev'
// Load single icon
const { svg } = await loadIcon({ name: 'arrow-right' })
// Preload icons
await preloadIcons(['icon1', 'icon2', 'icon3'])
// Get all available icons (Node.js only)
const icons = getAvailableIcons() // ['arrow-right', 'star', ...]
// Check if icon exists (Node.js only)
if (hasIcon('arrow-right')) {
// Icon is available
}
After running npx icondev init, an icondev.json file is created in your project root:
{
"apiKey": "pk_...",
"projectSlug": "my-project",
"cdnUrl": "https://cdn.icon.dev",
"icons": [
{
"slug": "arrow-right",
"url": "https://cdn.icon.dev/id-my-project/arrow-right.svg",
"collection": "arrows"
},
{
"slug": "star",
"url": "https://cdn.icon.dev/id-my-project/star.svg",
"collection": "misc"
}
],
"updatedAt": "2025-01-15T10:00:00Z"
}
Important:
icondev.json file should be committed to your repositoryicondev.json to your public/ folder so it's accessible at /icondev.jsonpk_...) is a public key and is safe to commitnpx icondev initInteractive setup wizard. Creates icondev.json with your project configuration and fetches all available icons.
npx icondev syncUpdates icondev.json with the latest icons from your Icon.dev project. Use this command when:
The command will show a summary of changes:
+ N icon(s) added - New icons available- N icon(s) removed - Icons no longer available~ N icon(s) updated - Existing icons with new versionsIcons are loaded on-demand from Cloudflare CDN:
<Icon name="arrow-right" />icondev.json file/icondev.json (public folder)✅ Smallest bundle size ✅ No build step required ✅ Smart in-memory caching ✅ Works everywhere (Node.js, browser, SSR) ✅ Simple single-file configuration
Full TypeScript support included:
import type { IconProps } from 'icondev'
const props: IconProps = {
name: 'arrow-right',
size: 24,
color: 'blue'
}
'use client' directive)icondev.json to your public/ foldericondev.json to your public/ folderUse client components and ensure icondev.json is in your public/ folder:
'use client'
import { Icon } from 'icondev/react'
export default function MyComponent() {
return <Icon name="arrow-right" />
}
Setup for Next.js:
npx icondev init in your project rooticondev.json to public/icondev.jsonIcons handle errors gracefully:
<Icon
name="invalid-icon"
onError={(error) => {
console.error('Failed to load icon:', error)
}}
/>
Error states get icon-error class and data-icon-error attribute.
To update your icon list when new icons are added to your project:
npx icondev sync
This will refresh your icondev.json with the latest icons from your Icon.dev project and show a summary of changes.
MIT
FAQs
Official Icon.dev SDK for React, Vue, Angular and vanilla JS
We found that icondev demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.