Devicons
Devicon is a specialized open-source icon set representing programming languages, design & development tools, and popular technology brands. With 800+ technology logos available as clean SVG files, it's the go-to library for developer portfolios, tech stack displays, and documentation. Unlike general-purpose icon libraries (Lucide, Heroicons), Devicon focuses exclusively on technology branding. Each icon comes in multiple variants — original (full color), plain (monochrome), and line (outline) — with optional wordmark versions. This makes it ideal for skills sections, README badges, and tech stack showcases. The collection is licensed under MIT; review the icon license guide for commercial-use details.
Devicons Specifications & Framework Compatibility
| Property | Specification Details |
|---|---|
| Total Icons | 1,623 vector SVG icons |
| License | MIT (Commercial & Personal Use) |
| TypeScript Support | Native .d.ts definitions included |
| Framework Support | React, Next.js, Vue, Svelte, Tailwind CSS |
| Primary NPM Package | devicon (CDN) |
| Source Repository | Official GitHub Repository → |
How many icons does Devicons have?
Devicons currently includes 1,623 vector icons indexed in the IconSearch catalog. Every icon is available in clean SVG format with customizable stroke widths, colors, and direct multi-framework code exports for modern web applications.
Is Devicons free for commercial use?
Yes, Devicons is distributed under the MIT license. This permissive open-source license allows unrestricted commercial and personal usage in proprietary software, SaaS platforms, client websites, and digital products without licensing fees.
How do you install and use Devicons in React, Next.js, and Vue?
Install the package using // No npm install needed — use the CDN link
// Add to your HTML <head>:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />, then import icons directly into your JSX, TSX, or Vue components. Alternatively, copy raw customized SVG markup directly from IconSearch with zero client-side JavaScript overhead.
// Install package
// No npm install needed — use the CDN link
// Add to your HTML <head>:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
// React & Next.js App Router usage
import { Aarch64 } from 'devicon (CDN)'
export default function Header() {
return <Aarch64 className="w-5 h-5 text-indigo-500" />
}Devicons FAQ & Technical Guide
Is Devicon free for commercial use?
Yes. Devicon uses the MIT license which allows free use in any commercial project without attribution. However, the individual brand logos remain trademarks of their respective owners.
How do I use Devicon in React or Next.js?
Three approaches: (1) Add the CDN stylesheet and use <i className='devicon-react-original colored'> class names. (2) Use SVG URLs in <img> tags. (3) Download specific SVGs and import them as React components using SVGR or next/image.
What icon variants are available?
Most icons come in: original (full color logo), plain (single-color silhouette), and line (outline only). Many also have -wordmark versions that include the technology name text beneath the logo.
How do I request a new technology icon?
Open an issue on the Devicon GitHub repository (github.com/devicons/devicon) with the technology name and reference logo. The community regularly adds new icons through pull requests.
What is the difference between Devicon and Simple Icons?
Simple Icons focuses on brand logos broadly (social media, companies, products) with 3,200+ monochrome icons. Devicon focuses specifically on developer tools and programming languages with 800+ icons in multiple color variants. For a tech stack display, Devicon's colored originals are usually better.