Set of icons representing programming languages, designing & development tools
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Go to file
Josélio Júnior 55609aa5bd
Fix build icons workflow (#1840)
3 months ago
.github Fix build icons workflow (#1840) 3 months ago
docs Update Discord Icon in Website 2 years ago
fonts Build preparation for release v2.15.0 (#1079) 2 years ago
icons Build preparation for release v2.15.0 (#1079) 2 years ago
.gitignore Build preparation for release v2.15.0 (#1079) 2 years ago Update the Code of Conduct to the latest version 2 years ago New Feature: Add images for the wiki and edit links to point to it (#996) 2 years ago
LICENSE Update LICENSE 9 years ago New Feature: Add images for the wiki and edit links to point to it (#996) 2 years ago
bower.json Release v2.2 7 years ago
devicon-base.css Build preparation for release v2.15.0 (#1079) 2 years ago
devicon.json new icon: opensuse (original, original-wordmark, plain, plain-wordmark) (#1076) 2 years ago
devicon.min.css Build preparation for release v2.15.0 (#1079) 2 years ago
gulpfile.js Add fix for bad zip file and logging for build (#1069) 2 years ago
icomoon.json Build preparation for release v2.15.0 (#1079) 2 years ago
package-lock.json bump npm version to v2.15.1 2 years ago
package.json bump npm version to v2.15.1 2 years ago

GitHub release (latest by semver) GitHub GitHub contributors GitHub branch checks state GitHub issues by-label GitHub Repo stars

Devicon Logo
devicon aims to gather all logos representing development languages and tools.

Demo · Request Icon · Contribute


<!-- in your header -->
<link rel="stylesheet" href="">

<!-- in your body -->
<i class="devicon-devicon-plain"></i>

Table of Contents

  1. About the project
  2. Getting started
  3. Requesting icon
  4. Contributing
  5. Discord server
  6. develop vs master
  7. Stale pull requests
  8. Go build yourself

About the project

Devicon aims to gather all logos representing development languages and tools. Each icon comes in several versions: font/SVG, original/plain/line, colored/not colored, wordmark/no wordmark. Devicon has 150+ icons. And it's growing!

See the devicon.json or our website for complete and up to date reference of all available icons.

All product names, logos, and brands are property of their respective owners. All company, product and service names used in this website are for identification purposes only. Use of these names, logos, and brands does not imply endorsement. Usage of these logos should be done according to the company/brand/service's brand policy.

Thank you to our contributors and the IcoMoon app. Devicon would not be possible without you.

Getting started

For a super fast setup go check
You can either use the raw SVG icons or our devicon font (which is also available via CDN).

Use the devicon font (recommended)

You can install devicon as a dependency to your project either with npm or yarn:

npm install --save devicon
yarn add devicon

If you don't want to use a package manager you can also download and include devicon.min.css next to the font files to your project. See for details about how to add devicon to your project via a CDN.

After setting up you just have to include the stylesheet in your header to get started:

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

Start using icons with <i>-tag

<!--  for devicon plain version -->
<i class="devicon-devicon-plain"></i>

<!--  for devicon plain version with wordmark -->
<i class="devicon-devicon-plain-wordmark"></i>

<!--  for devicon plain version colored with devicon main color -->
<i class="devicon-devicon-plain colored"></i>

<!--  for devicon plain version with wordmark colored with devicon main color -->
<i class="devicon-devicon-plain-wordmark colored"></i>

An alternate way to use devicon is by copy/paste the raw SVG code to your project.

Copy/paste SVG code (from the svg folder or the project page)

<!--  for devicon plain version -->
<svg id="Devicon" class='devicon-devicon-plain' xmlns="" viewBox="0 0 128 128"><path id="plain" fill="#60be86" d="M64,7.83H4.77L14.95,95.13l49,25,.06,0,49.07-25L123.23,7.83Zm42.77,54.86c0,.88,0,1.67-.77,2L73.25,80.44l-2.42,1.13-.27-3.15V72.23l.24-1.57,1.09-.47L95.07,59.81l-21.54-9.6L64.35,68.34,58.9,78.87l-1.22,2.27-2.05-.9L22,64.71a2.42,2.42,0,0,1-1.45-2V56.91a2.39,2.39,0,0,1,1.42-2l34-15.73,3.21-1.44v9.66l.24,1.34-1.56.7L34.45,59.79,56.3,69.42l8.05-16,6.21-12.65,1.13-2.28,1.81.91L106,54.89c.73.35.76,1.14.76,2Z"/></svg>

Add css rules in your stylesheet

.devicon-devicon-plain {
  max-width: 2em;

/* if you want to change the original color */
.devicon-devicon-plain path {
  fill: #4691f6;

You can also use the img tag and referencing an svg directly from the repo.

<img src=''>

Requesting icon

When you want to request an icon please feel free to create an issue. See our Wiki for more information.


We are happy with every contribution, whether it's new icons, features, or maintainers. Please have a look at our Wiki to see how you can contribute to this project.

Discord server

We are running a Discord server. You can go here to talk, discuss, and more with the maintainers and other people, too. Here's the invitation: Note that the Discord server is unofficial, and Devicons is still being maintained via GitHub.

develop vs master

All official releases shall be in master. Any updates in between (icons, features, etc.) will be kept in develop.

develop contains:
  • Latest SVGs (non-optimized).
  • No icons for the latest SVGs. These will be build at every release.
  • Experimental changes.
master contains:
  • Latest official release, which contains the SVGs and icons.
  • Official tested changes.

Stale pull requests

After a pull request has been open for over 30 days with no activity or response from the author, it'll be automatically marked as stale. We might fork your changes and merge the changes ourselves. Since GitHub tracks contributions by commits, you will be credited.

Go build yourself

Feel free to follow those steps when you want to build the font by yourself.


Install gulp (and gulp plugins)

npm install
Build the font and export stylesheet
Open and import icomoon.json. Choose yes when being asked if you would like to restore the settings stored in the configuration file.

The next step is to click on Generate font and download the resulting archive. Extract the contents and you will find a fonts directory next to a style.css. Replace the contents of the fonts folder, rename style.css as devicon.css and follow the next step to build the final stylesheet.

Build and minify stylesheet

Run the following command to build the resulting file devicon.min.css

npm run build-css