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

Demo · Request Icon · Contribute

TL;DR

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

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

Table of Contents

1. About the Project
2. Getting Started
3. Requesting Icon
4. Contributing
5. Discord Community
6. developvsmaster
7. Stale Pull Requests
8. Building Devicon

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 thedevicon.jsonorour websitefor complete and up to date reference of all available icons.

Thanks to all our contributors and theIcoMoon app.Devicon would not be possible without you.

_{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.}

Getting Started

For a super fast setup, go checkdevicon.dev.
You can either use theraw SVGicons, ourDevicon font(which is also available viaCDN), or bybuilding Deviconyourself.

Use thedeviconfont (recommended)

You can install devicon as a dependency to your project either withnpmoryarn:

npm install --save devicon
yarn add devicon

If you don't want to use a package manager, you can also download and includedevicon.min.cssnext to thefont filesto your project. Seedevicon.devfor 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:

<linkrel= "stylesheet"href= "devicon.min.css">

Start using icons with<i>-tag:

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

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

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

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

An alternate way to usedeviconis by copy/pasting the raw SVG code to your project.

Copy/paste SVG code (from theSVG folderor theproject page):

<!-- for devicon plain version -->
<svgid= "Devicon"class='devicon-devicon-plain'xmlns= "http:// w3.org/2000/svg"viewBox= "0 0 128 128"><pathid= "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 the following CSS rules in your stylesheet:

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

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

You can also use theimgtag and reference an SVG directly from the repository:

<imgsrc='https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/devicon/devicon-original.svg'>

Requesting an icon

When you want to request an icon please feel free to create an issue. Check out ourWikifor more information.

Contributing

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

Discord community

We have a Discord community for Devicons. You can easily request icons, discuss, and have a good time talking with the community members! Join the official Discord Serverhere!

developvsmaster

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

developcontains:

• Latest SVGs (non-optimized).
• No icons for the latest SVGs. These will be built at every release.
  Can be built manually. SeeBuilding Devicon.
• Experimental changes.

mastercontains:

• Latest official release, which contains all 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.

Building Devicon

Follow these steps to build the website and icons either locally or usingGitpod.io.

Table of contents

1. Using Gitpod to build
2. Local Installation
1. Install dependencies
2. Build the icons
3. Build the CSS stylesheet
4. Setting up the web server

Using Gitpod.io

By usingGitpod.io,you can easily build the icons and install the
required dependencies in one single click. No extra setup is required.

Note In case some of the commands are not properly ran, you can
follow the steps below and run the same commands on Gitpod.io

Local Installation

Install dependencies

Forkthe repository and clone the forked repository.

git clone https://github /<your-github-username>/devicon.git

Note In case you don't have Git installed, check theofficial guideto install Git on your operating system.

Install all the necessary NPM dependencies

npm install

Note In case you don't have NPM installed, check thisultimate guideon installing Node.js and NPM. These tools are required in order to build Devicon properly.

Install Firefox

https:// mozilla.org/en-US/firefox/new/

Install Python 3.8

https:// Python.org/downloads/

Note Make sure your Python install includespip

Install Selenium

```bash Python 3 -m pip install --upgrade pip && pip install selenium==4.1.0 requests==2.25.1 ```

Build the new icons

Once all the dependencies are installed, you can proceed to build the newest icons.
Usually, this is done on each release, but you can have a sneak peek before a release.

#Linux/Unix
npm run build-icons

#Windows
Python 3./.github/scripts/icomoon_build_githubless.py./.github/scripts/build_assets/geckodriver-v0.32.2-win64/geckodriver.exe./icomoon.json./devicon.json./icons./ --headless

The process might take a while, depending on your operating system's speed and the amount of icons.

If there are any errors shown, please let us know bycreating an issueor contacting us on ourDiscord community.

Build the CSS stylesheet

Run the following command to build the new CSS stylesheet.
This file is used to show all the new icons previously built.

npm run build-css

Setting up the web server

Run the following command to start the web server with Python.

npm run dev#Will run on port 8000

Or this command, which does exactly the same, but the port can be customized.

Python 3 -m http.server<port>

You're done now! 🎉 Your build of Devicons should be available athttps://localhost:8000(or the desired port).