Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/devicons/devicon
Set of icons representing programming languages, designing & development tools
https://github.com/devicons/devicon
brands devicon font hacktoberfest icons logos stylesheet svg
Last synced: 11 days ago
JSON representation
Set of icons representing programming languages, designing & development tools
- Host: GitHub
- URL: https://github.com/devicons/devicon
- Owner: devicons
- License: mit
- Created: 2014-03-01T15:14:04.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2024-04-25T05:13:35.000Z (7 months ago)
- Last Synced: 2024-05-01T13:07:05.064Z (6 months ago)
- Topics: brands, devicon, font, hacktoberfest, icons, logos, stylesheet, svg
- Language: CSS
- Homepage: https://devicon.dev
- Size: 113 MB
- Stars: 9,018
- Watchers: 59
- Forks: 2,246
- Open Issues: 400
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- my-awesome-list - devicon
- awesome-icons - Devicon - Aims to gather all logos representing development languages and tools. ([Website](https://devicons.github.io/devicon)) (Logos)
- awesome-starred - devicons/devicon - Set of icons representing programming languages, designing & development tools (hacktoberfest)
- jimsghstars - devicons/devicon - Set of icons representing programming languages, designing & development tools (CSS)
README
Devicon aims to gather all logos representing development languages and tools.
Demo
·
Request Icon
·
Contribute
TL;DR
```html
```
Table of Contents
- About the Project
- Getting Started
- Requesting Icon
- Contributing
- Discord Community
develop vs master
- Stale Pull Requests
- 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 the devicon.json or our website for complete and up to date reference of
all available icons.
Thanks to all our contributors and the IcoMoon 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 check devicon.dev.
You can either use the raw SVG icons, our Devicon font (which is
also available via CDN), or by building Devicon yourself.
Use the devicon font (recommended)
You can install devicon as a dependency to your project either with npm or yarn:
```bash
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:
```html
```
Start using icons with <i>-tag:
```html
```
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 or the project page):
```html
```
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
```
Requesting an icon
When you want to request an icon please feel free to create an issue. Check out our Wiki for more information.
Contributing
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 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:
-
Latest SVGs (non-optimized).
-
No icons for the latest SVGs. These will be built at every release.
Can be built manually. See Building Devicon.
-
Experimental changes.
master contains:
-
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 using Gitpod.io.
Table of contents
Using Gitpod.io
By using Gitpod.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
Fork the repository and clone the forked repository.
```bash
git clone https://github.com//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](https://pypi.org/project/pip/)
Install Selenium
```bash
python3 -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.
```bash
# Linux/Unix
npm run build-icons
# Windows
python3 ./.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 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
python3 -m http.server
```
You're done now! :tada: Your build of Devicons should be available at https://localhost:8000 (or the desired port).
