Skip to content
Get packs

Guide · Open source

How to use devicon: install, CSS classes and SVG icons

Updated · written with AI from the project's own documentation and checked against our catalogue data

Devicon is an open-source collection of logos for programming languages and development tools, such as the icons you might see on a portfolio or documentation site. This guide shows you how to add Devicon to a project, either as an icon font with CSS classes or as SVG files. By the end you will be able to place a language or tool logo on a page and style it.

devicondevicons/devicon · ★ 11.9k · MIT

Quick start

  1. 1Install the package. Run npm install --save devicon or yarn add devicon in your project folder.
  2. 2Include the stylesheet. Add a link tag pointing to devicon.min.css in your page header.
  3. 3Add an icon element. Place an <i> tag in your HTML with a class such as devicon-devicon-plain.
  4. 4Pick a style variant. Add -wordmark to the class for the wordmark version, or add the colored class for the main Devicon color.
  5. 5Adjust size or color. Add CSS rules such as max-width or a path fill to change the icon's size or color.

What Devicon includes

Devicon aims to gather all logos representing development languages and tools. The README says it has 150+ icons and that the set is still growing.

Each icon comes in several versions: font/SVG, original/plain/line, colored/not colored, and wordmark/no wordmark. The full list of icons is in devicon.json and on the devicon.dev website.

  • Font or SVG format
  • Original, plain or line styles
  • Colored or uncolored
  • With or without wordmark

Install Devicon with npm or yarn

The README recommends using the icon font. You can add Devicon to your project as a dependency with npm or yarn. The README lists no prerequisites.

If you don't want to use a package manager, you can download devicon.min.css and place it next to the font files in your project. The README also mentions a CDN option, described on devicon.dev.

npm install --save devicon yarn add devicon

Add the stylesheet to your page

After setting up, include the stylesheet in your page header. If you installed from a package manager, point the link at the devicon.min.css file in your project. The README also shows a jsDelivr CDN link pattern in its quick start.

<link rel="stylesheet" href="devicon.min.css">

Show an icon with the i tag and a CSS class

Add an <i> element in your HTML and give it a devicon class. The class name combines the icon name and the style variant. Add the colored class to use Devicon's main color.

The README shows these four variants: plain, plain with wordmark, colored plain, and colored plain with wordmark.

  • Use devicon-devicon-plain for the plain version
  • Use devicon-devicon-plain-wordmark to include the wordmark
  • Add the colored class to use the devicon main color
<i class="devicon-devicon-plain"></i> <i class="devicon-devicon-plain-wordmark"></i> <i class="devicon-devicon-plain colored"></i> <i class="devicon-devicon-plain-wordmark colored"></i>

Use SVG files instead of the font

You can also copy the raw SVG code into your project, or reference an SVG file with an img tag. The README gives a CSS example for sizing the icon and for changing its fill color. Note that the README does not say how to choose a specific language icon beyond the class or file name shown in its examples.

  • Copy SVG markup from the SVG folder or the project page
  • Reference a file with an img tag from the repository
  • Adjust size and color with CSS rules on the SVG paths
.devicon-devicon-plain { max-width: 2em; } /* if you want to change the original color */ .devicon-devicon-plain path { fill: #4691f6; }

What people use it for

  • Listing languages and tools on a developer portfolio
  • Adding a tech-stack or skills section to a website
  • Showing logos in a project README
  • Using icons in documentation pages

Frequently asked questions

Is Devicon free to use?

Devicon is released under the MIT licence, as stated in the README. However, the README notes that logos remain the property of their owners and must follow each brand's policy.

How do I install Devicon?

Run npm install --save devicon or yarn add devicon in your project. You can also download devicon.min.css and include it in your project without a package manager.

How many icons does Devicon have?

The README says Devicon has 150+ icons and that the set is still growing. The full list is in devicon.json and on devicon.dev.

Can I use Devicon SVG files instead of the font?

Yes. The README says you can copy the raw SVG code into your project or reference an SVG file with an img tag. You can then style the paths with CSS.

Is Devicon a general-purpose icon set?

No. The README describes it as focused on logos for development languages and tools. For general interface icons, a broader set is a better fit.

What should I check before using brand logos?

The README notes that product names, logos and brands are owned by their respective owners and that use should follow each company's brand policy. Check that policy before publishing logos on a commercial site.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Devicon suits web developers and designers who want language or tool logos on a site, in a README or in a skills section, and who prefer an icon font or SVG files. It is not a good choice if you need a general-purpose icon set, or if your project cannot follow each brand's logo usage policy. Comparable projects named for this item include Font Awesome, Simple Icons and Iconify.

Install options & downloads