devicon Documentation

Technical Documentation: devicons/devicon

ℹ️ Provenance: Multi-Tier Ingestion · CodeWiki Reference

Overview (README.md)

TL;DR

html

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


<i class="devicon-devicon-plain"></i>

[About the Project](#about)
[Getting Started](#getting-started)
[Requesting Icon](#request-icon)
[Contributing](#contribute)
[Discord Community](#discord-community)
[`develop` vs `master`](#develop-vs-master)
[Stale Pull Requests](#stale-prs)
[Building Devicon](#building-devicon)

About the Project

text

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](/devicon.json) or [our website](https://devicon.dev) for complete and up to date reference of
all available icons.



Thanks to all our contributors and the [IcoMoon app](https://icomoon.io/#home). 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

text

For a super fast setup, go check [devicon.dev](https://devicon.dev).
You can either use the [raw SVG](#getting-started-svg) icons, our [Devicon font](#getting-started-font) (which is
also available via <a href=https://www.jsdelivr.com/package/npm/devicon>CDN</a>), or by <a href=#building-devicon>building Devicon</a> yourself.

Use the `devicon` font (recommended)

text

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

bash

npm install --save devicon
yarn add devicon

text

If you don't want to use a package manager, you can also download
and include [devicon.min.css](/devicon.min.css) next to the [font files](/fonts) to your project.
See [devicon.dev](https://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:

html

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

Start using icons with <i>-tag:

html

<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>

text

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

Copy/paste SVG code (from the [SVG folder](https://github.com/devicons/devicon/tree/master/icons) or the [project page](https://devicon.dev)):

html

<svg id="Devicon" class='devicon-devicon-plain' xmlns="http://www.w3.org/2000/svg" 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 the following CSS rules in your stylesheet:

css

.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 reference an SVG directly from the repository:

html

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

Requesting an icon

text

When you want to request an icon please feel free to create an issue. Check out our [Wiki](https://github.com/devicons/devicon/wiki/Requesting-an-Icon) for more information.

Contributing

text

We are happy with every contribution, whether it's new icons, features, or maintainers. Please have a look at our [Wiki](https://github.com/devicons/devicon/wiki) to 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 Server here!

`develop` vs `master`

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

develop contains:

text

<li>
    Latest SVGs (non-optimized).
</li>
<li>
    No icons for the latest SVGs. These will be built at every release.
    Can be built manually. See [*Building Devicon*](#building-devicon).
</li>
<li>
    Experimental changes.
</li>

master contains:

text

<li>
    Latest official release, which contains all the SVGs and icons.
</li>
<li>
    Official, tested changes.
</li>

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 using Gitpod.io.

[Using Gitpod to build](#using-gitpod)
[Local Installation](#local-installation)

[Install dependencies](#install-dependencies)
[Build the icons](#building-icons)
[Build the CSS stylesheet](#build-css)
[Setting up the web server](#web-server)

Using Gitpod.io

By using Gitpod.io, you can easily build the icons and install therequired 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

Fork the repository and clone the forked repository.

bash

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

Note
In case you don't have Git installed, check the official guide to install Git on your operating system.

Install all the necessary NPM dependencies

bash

npm install

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

Install Firefox

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

Install Python 3.8

https://www.python.org/downloads/

Note
Make sure your Python install includes pip

Install Dependencies

bash

python -m pip install -r ./.github/scripts/requirements.txt

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.

bash

npm run build-icons

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 by creating an issue or contacting us on our Discord 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.

bash

npm run build-css

Setting up the web server

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

bash

npm run dev # Will run on port 8000

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

bash

python -m http.server <port>

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

--- METRICS ---

Files Extracted: 1
Estimated Token Budget: ~3207 tokens
Canonical Reference: https://codewiki.google/github.com/devicons/devicon

devicon Documentation

Docker & Self-Hosted Deployment Verified OCI

Technical Documentation: devicons/devicon

Overview (README.md)

TL;DR

Table of Contents

About the Project

Getting Started

Use the `devicon` font (recommended)

Copy/paste SVG code (from the [SVG folder](https://github.com/devicons/devicon/tree/master/icons) or the [project page](https://devicon.dev)):

You can also use the `img` tag and reference an SVG directly from the repository:

Requesting an icon

Contributing

Discord community

`develop` vs `master`

Stale Pull Requests

Building Devicon

Table of contents

Using Gitpod.io

Local Installation

Install dependencies

Install all the necessary NPM dependencies

Install Firefox

Install Python 3.8

Install Dependencies

Build the new icons

Build the CSS stylesheet

Setting up the web server

Table of Contents

Docker & Self-Hosted Deployment Verified OCI

Technical Documentation: devicons/devicon

Overview (README.md) Copy Section

TL;DR

Table of Contents

About the Project

Getting Started

Use the `devicon` font (recommended)

Copy/paste SVG code (from the [SVG folder](https://github.com/devicons/devicon/tree/master/icons) or the [project page](https://devicon.dev)):

You can also use the `img` tag and reference an SVG directly from the repository:

Requesting an icon

Contributing

Discord community

`develop` vs `master`

Stale Pull Requests

Building Devicon

Table of contents

Using Gitpod.io

Local Installation

Install dependencies

Install all the necessary NPM dependencies

Install Firefox

Install Python 3.8

Install Dependencies

Build the new icons

Build the CSS stylesheet

Setting up the web server

Explore Related Technologies & Topics

Overview (README.md)