Devicons
Developer & technology brand icons — logos for every language, framework, and tool
STATS
OVERVIEW
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.
Devicon distributes icons via a CDN-hosted font and individual SVG files on GitHub/jsDelivr. There is no official React component package, but SVGs can be used directly via img tags or imported as React components using SVGR. The devicon.json manifest provides structured metadata including tags, alt names, and available variants for each icon.
// VERDICTDevicon is essential for any developer-facing product that needs to display technology logos. It complements general-purpose icon sets perfectly — use Lucide or Heroicons for UI chrome, and Devicon for technology branding. The library is actively maintained with new technologies added regularly.
OFFICIAL LICENSE & COMMERCIAL USE
The MIT License is a highly popular, extremely permissive open-source license. Under the MIT License, you are officially allowed to use Devicons in any personal, commercial, or corporate software projects completely free of charge. You can modify the icons, distribute them, sell software containing them, and even sublicense them. The only requirement is that you must preserve the original copyright notice and permission notice in all copies of the software.
- Commercial Use Allowed
- Modification Allowed
- Redistribution Allowed
- Sublicensing Allowed
- Must keep copyright notice in source files
- License remains active on copy/use
INSTALLATION
// 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" />
// In your layout.tsx or _document.tsx, add the CDN link. // Or download specific SVGs and import them as components. // Note: For Next.js, consider downloading only the SVGs you need rather than loading the full font to optimize performance.
// Add CDN link to index.html or use SVG files directly in Vue components
// Add CDN link to app.html or import SVGs directly
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
CODE EXAMPLES
{/* Using the Devicon font via CDN class names */}
<i className="devicon-react-original colored"></i>
<i className="devicon-nextjs-plain"></i>
<i className="devicon-typescript-plain colored"></i>
<i className="devicon-python-plain colored"></i>{/* Tech stack display with Tailwind */}
export function TechStack() {
const techs = [
'react', 'nextjs', 'typescript',
'tailwindcss', 'postgresql', 'docker'
]
return (
<div className="flex items-center gap-4">
{techs.map(tech => (
<img
key={tech}
src={`https://cdn.jsdelivr.net/gh/devicons/devicon/icons/${tech}/${tech}-original.svg`}
alt={tech}
className="w-8 h-8 hover:scale-110 transition-transform"
/>
))}
</div>
)
}<!-- Vanilla HTML usage with font classes -->
<link rel="stylesheet" type="text/css"
href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />
<!-- Colored original logos -->
<i class="devicon-javascript-plain colored" style="font-size: 48px;"></i>
<i class="devicon-docker-plain colored" style="font-size: 48px;"></i>
<!-- Or use SVG files directly -->
<img src="https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg"
alt="React" width="48" height="48" />