explaingit

devicons/devicon

11,628CSSAudience · developerComplexity · 1/5Setup · easy

TLDR

A library of 150+ icons for programming languages and dev tools, usable in any web project via a font CSS class or by pasting raw SVG code directly into HTML.

Mindmap

mindmap
  root((repo))
    What it does
      150 plus dev icons
      Font and SVG styles
      Plain and wordmark variants
    How to use
      CDN CSS link
      npm install
      Copy SVG code
    Use cases
      Portfolio sites
      Documentation pages
      Tool landing pages
    Audience
      Web developers
      Frontend builders
      Tech writers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add recognizable tech-stack icons to a portfolio site using a single CDN CSS link and class names.

USE CASE 2

Embed SVG logos directly into documentation or a landing page without hunting for each brand's asset separately.

USE CASE 3

Install via npm to bundle dev-tool icons into a frontend build pipeline.

Tech stack

CSSSVGHTMLnpm

Getting it running

Difficulty · easy Time to first run · 5min
The icons are free to use, but all product names and logos remain the property of their respective owners, you must follow each brand's own usage guidelines.

In plain English

Devicon is a collection of icons representing programming languages, frameworks, and development tools. Each icon comes in several visual styles, such as plain, line, and original, and can be displayed with or without a wordmark (the tool's name beside the logo). The collection has more than 150 icons and keeps growing as contributors add new ones. The icons can be added to a web project in two main ways. The first is through a font file, which lets you insert an icon using a simple HTML tag. You include one CSS file in your page and reference icons by class name. This works via a CDN link, an npm package, or a downloaded copy of the files. The second approach is to copy the raw SVG code directly from the repository or the project website and paste it into your HTML, then adjust the size and color with a few CSS lines. Devicon is useful for portfolio sites, developer tool landing pages, documentation, and any web project where you want to display recognizable technology logos without tracking down each one separately. The icons are free to use, but the project notes that all product names and logos remain the property of their respective owners, so following each brand's own usage guidelines is your responsibility. The project is community-driven. New icons are added through pull requests, and anyone can open an issue to request an icon for a tool not yet in the collection. A Discord community exists for contributors and users, and a dedicated website at devicon.dev lets you browse all available icons and copy the code you need. If you are building a site that needs to show off a tech stack visually, this is a ready-made icon library built specifically for that purpose.

Copy-paste prompts

Prompt 1
I'm building a portfolio page and want to show my tech stack with icons. Help me add Devicon icons for React, Python, and Docker using their CDN link and the correct HTML class names.
Prompt 2
Show me how to embed a Devicon SVG for TypeScript directly in HTML and resize it to 48px with CSS.
Prompt 3
I need to display icons for 10 different programming languages on my readme page. Walk me through using the Devicon npm package with a webpack project.
Prompt 4
Help me style Devicon font icons to match a dark theme, I want them white with a hover color change effect.
Open on GitHub → Explain another repo

← devicons on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.