Install

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

Quick Start

<script setup>
import { ReactIcon, TypescriptIcon, PythonIcon } from 'devicon-kit-vue';
</script>

<template>
  <ReactIcon />
  <TypescriptIcon size="lg" />
  <PythonIcon :size="48" color="#3776AB" />
</template>

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 and title prop

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" />

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" />

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 |

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

• Vue >= 3.3.0

License

MIT