<!-- 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>
- About the project
- Getting started
- Requesting icon
- Contributing
- Discord server
develop
vsmaster
- Stale pull requests
- Go build yourself
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.
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 theIcoMoon app.Devicon would not be possible without you.
For a super fast setup go checkdevicon.dev.
You can eitheruse the raw SVGicons or ourdevicon font(which is
also available via CDN).
You can install devicon as a dependency to your project either withnpm
oryarn
:
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 usedevicon
is by copy/paste 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 css rules in your stylesheet
.devicon-devicon-plain{
max-width:2em;
}
/* if you want to change the original color */
.devicon-devicon-plainpath{
fill:#4691f6;
}
<imgsrc='https://cdn.jsdelivr.net/gh/devicons/devicon/icons/devicon/devicon-original.svg'>
When you want to request a icon please feel feel to create a issue. See ourcontribution guidelinesfor more information.
We are happy for every contribution, whether it's new icons, features, or maintainers. Please have a look at ourcontribution guidelinesto see how you can contribute to this project.
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:https://discord.gg/hScy8KWACQ. Note that the Discord server is unofficial, and Devicons is still being maintained via GitHub.
All official releases shall be inmaster
.Any updates in between (icons, features, etc.) will be kept indevelop
.
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.
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.
Feel free to follow those steps when you want to build the font by yourself.
Install gulp (and gulp plugins)
npm install
The next step is to click onGenerate fontand download the resulting archive. Extract the contents and you will find afontsdirectory next to astyle.css
.Replace the contents of thefonts
folder, renamestyle.css
asdevicon.cssand follow the next step to build the final stylesheet.
Run the following command to build the resulting filedevicon.min.css
npm run build-css