Devicon Icons

Browse 970 free Devicon multi-color icons. Download SVG, copy as JSX, PNG or Base64. MIT licensed. Designed by konpa.

970 icons MIT Programming 32px grid by konpa
⌘+F

Copy & download Devicon icons

Click any icon above to open the detail panel. Four export formats are available instantly — no sign-up required.

SVG

Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.

JSX / TSX

React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.

PNG

Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.

Base64

Inline data URI — embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.

Works with shadcn/ui

Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, install and use via @iconify/react — fully tree-shakeable, no icon font loading required.

About Devicon

Devicon is the definitive SVG icon library for programming languages, frameworks, and developer tools — with 450+ technologies represented across up to four visual variants: colored (official brand colors), plain (monochrome/adaptable), line (outlined with brand colors), and wordmark variants. Coverage spans languages (JavaScript, TypeScript, Python, Rust, Go, Kotlin, Swift), frameworks (React, Vue, Next.js, Nuxt, Remix, Astro, SvelteKit), databases (MongoDB, PostgreSQL, MySQL, Redis), cloud platforms (AWS, GCP, Azure, Vercel, Netlify), and dev tools (Docker, Kubernetes, Git, GitHub, Figma). Free with attribution (a credits link is the standard ask). Search Devicon by technology name, copy SVG, export as JSX, or download PNG on AllSVGIcons. Devicon is the standard choice for portfolio "tech stack" sections, README technology badges, developer tool marketing pages, and platform profile cards. Compared with Simple Icons: Devicon offers multiple style variants per icon with brand colors; Simple Icons provides flat monochrome brand icons only.

Created By

konpa Visit Website

License

MIT View License

Pack Details

Color Support

Multi-color

Category

Programming

In 3 collections

Brand & Logo Programming & Developer Developer Tool

How to use Devicon icons

License SPDX

MIT

Grid Size

32px

Display Size

16px

Sample Icons

windows8, tensorflow, logstash

React

tsx 
// Copy individual SVGs from AllSVGIcons or use Iconify:
import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="devicon:react" width={32} />;
}

HTML / CDN

html 
<!-- CDN stylesheet (icon font) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css" />

<!-- colored = brand colors, plain = monochrome, line = outlined -->
<i class="devicon-react-original colored"></i>
<i class="devicon-nextjs-plain"></i>
<i class="devicon-docker-plain-wordmark colored"></i>

Via Iconify · any framework

tsx 
import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="devicon:icon-name" width={24} />;
}

Compare Devicon with similar icon packs

Simple Icons

Frequently Asked Questions

Devicon covers 450+ technologies: languages (Python, JavaScript, Rust, Go), frameworks (React, Vue, Next.js), databases (MongoDB, PostgreSQL), tools (Docker, Git, Kubernetes), and cloud services (AWS, GCP, Azure).

Each technology has colored (brand colors), plain (monochrome), line (outline with colors), and line-colored variants. Choose based on whether your design system allows multi-color icons.

Add the CDN stylesheet: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">, then: <i class="devicon-react-original colored"></i>.