Install

npm install devicon-kit
# or
yarn add devicon-kit
# or
pnpm add devicon-kit

Quick Start

import { ReactIcon, TypescriptIcon, PythonIcon } from 'devicon-kit';

function App() {
  return (
    <div>
      <ReactIcon />
      <TypescriptIcon size="lg" />
      <PythonIcon size={48} color="#3776AB" />
    </div>
  );
}

Features

• 417+ icons — Frameworks, languages, tools, platforms, and more
• Tree-shakeable — Only import what you use, zero bloat
• TypeScript — Full type definitions out of the box
• Variants — default, light, dark, and wordmark styles
• Animations — Built-in spin, pulse, and bounce
• Accessible — Proper ARIA attributes, title and alt props
• Context API — Set global defaults with DevIconProvider
• Tiny per-icon — Each icon is its own module (~1-3 KB)

Usage

Sizes

Use named presets or a custom pixel value:

<ReactIcon size="xs" />   {/* 12px */}
<ReactIcon size="sm" />   {/* 16px */}
<ReactIcon size="md" />   {/* 24px (default) */}
<ReactIcon size="lg" />   {/* 32px */}
<ReactIcon size="xl" />   {/* 48px */}
<ReactIcon size="2xl" />  {/* 64px */}
<ReactIcon size={100} />  {/* 100px */}

Colors

<ReactIcon color="#61DAFB" />
<ReactIcon color="red" />
<ReactIcon color="currentColor" />

Each icon uses its official brand color by default.

Variants

<ReactIcon variant="default" />
<ReactIcon variant="light" />
<ReactIcon variant="dark" />
<ReactIcon variant="wordmark" />

Not all icons have every variant — missing variants gracefully fall back to default.

Animations

<ReactIcon animate="spin" />
<ReactIcon animate="pulse" />
<ReactIcon animate="bounce" />

Accessibility

{/* Decorative (hidden from screen readers) */}
<ReactIcon />

{/* Meaningful (announced by screen readers) */}
<ReactIcon title="React" />
<ReactIcon alt="React framework" />

Global Defaults with DevIconProvider

Set defaults for all icons in a subtree:

import { DevIconProvider, ReactIcon, TypescriptIcon } from 'devicon-kit';

function App() {
  return (
    <DevIconProvider size="lg" color="#333">
      <ReactIcon />        {/* inherits size="lg" color="#333" */}
      <TypescriptIcon />   {/* inherits size="lg" color="#333" */}
    </DevIconProvider>
  );
}

Per-Icon Imports (Maximum Tree-Shaking)

import { ReactIcon } from 'devicon-kit/icons/ReactIcon';
import { DockerIcon } from 'devicon-kit/icons/DockerIcon';

Dynamic Imports (Lazy Loading)

import { dynamicIconImports } from 'devicon-kit/dynamic';

// Load icon on demand
const { ReactIcon } = await dynamicIconImports['react']();

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | 'md' | Icon size | | color | string | Brand color | SVG fill color | | variant | 'default' \| 'light' \| 'dark' \| 'wordmark' | 'default' | Visual variant | | animate | 'none' \| 'spin' \| 'pulse' \| 'bounce' | 'none' | CSS animation | | title | string | — | Accessible title for screen readers | | alt | string | — | Aria-label for the SVG | | className | string | — | CSS class names | | style | CSSProperties | — | Inline styles |

All standard SVG attributes are also supported.

Available Icons

Includes icons for: React, TypeScript, JavaScript, Python, Go, Rust, Docker, Kubernetes, AWS, Azure, GCP, Firebase, Git, GitHub, VS Code, Node.js, Deno, Bun, Next.js, Nuxt, Svelte, Vue, Angular, Tailwind CSS, PostgreSQL, MongoDB, Redis, GraphQL, Figma, Linux, Android, Apple, and hundreds more.

Every icon follows the naming convention: {Name}Icon — for example ReactIcon, DockerIcon, TypescriptIcon.

Also Available

| Package | Framework | |---------|-----------| | devicon-kit | React | | devicon-kit-vue | Vue 3 |

Requirements

• React >= 18.0.0

License

MIT