devicon-kit-vue

417+ beautifully crafted developer icons as Vue 3 components.
Tree-shakeable, accessible, animated, and fully typed.

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

View all 417+ 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