abhigoyani / devicon

Set of icons representing programming languages, designing & development tools

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

Demo · Request Icon · Contribute

TL;DR;

<!-- in your header -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css">

<!-- 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. 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.}

Getting started

For a super fast setup go check devicon.dev.
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 devicon.dev 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 git plain version -->
<i class="devicon-git-plain"></i>

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

<!--  for git plain version colored with git main color (devicon-color.css or devicon.min.css required) -->
<i class="devicon-git-plain colored"></i>

<!--  for git plain version with wordmark colored with git main color (devicon-color.css or devicon.min.css required) -->
<i class="devicon-git-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 git plain version -->
<svg class="devicon-git-plain" viewBox="0 0 128 128">
  <path fill="#F34F29" d="M124.742,58.378L69.625,3.264c-3.172-3.174-8.32-3.174-11.497,0L46.685,14.71l14.518,14.518c3.375-1.139,7.243-0.375,9.932,2.314c2.703,2.706,3.462,6.607,2.293,9.993L87.42,55.529c3.385-1.167,7.292-0.413,9.994,2.295c3.78,3.777,3.78,9.9,0,13.679c-3.78,3.78-9.901,3.78-13.683,0c-2.842-2.844-3.545-7.019-2.105-10.521L68.578,47.933l-0.002,34.341c0.922,0.455,1.791,1.063,2.559,1.828c3.779,3.777,3.779,9.898,0,13.683c-3.779,3.777-9.904,3.777-13.679,0c-3.778-3.784-4.088-9.905-0.311-13.683C58.079,83.169,59,82.464,60,81.992V47.333c-1-0.472-1.92-1.172-2.856-2.111c-2.861-2.86-3.396-7.06-1.928-10.576L40.983,20.333L3.229,58.123c-3.175,3.177-3.155,8.325,0.02,11.5l55.126,55.114c3.173,3.174,8.325,3.174,11.503,0l54.86-54.858C127.913,66.703,127.916,61.552,124.742,58.378z"/>
</svg>

Add css rules in your stylesheet

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

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

Requesting icon

When you want to request a icon please feel feel to create a issue. See our contribution guidelines for more information.

Contributing

We are happy for every contribution. Please have a look at our contribution guidelines to see how you can contribute to this project.

Go build yourself

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

Prerequisites

Install gulp (and gulp plugins)

npm install

Build the font and export stylesheet

Open icomoon.io and import icomoon.json. Choose yes when beeing asked if you 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 it contents and you will find a fonts directory next to a style.css. Replace the content of the fonts folder, rename the style.css to 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