Contributing to Devicon

This guide has been converted to a Wiki! This document will eventually be removed, please use the Wiki instead.

First of all, thanks for taking the time to contribute! This project can only grow and live by your countless contributions. To keep this project maintainable, we have developed some guidelines for our contributors.

Table of Content

• Terms
• What Icons Do We Accept?
• Requesting An Icon
• Overview on Submitting Icon (start here if new to contributing)
• Naming Conventions
• SVG Standards
• Organizational Guidelines
• Updating the devicon.json
• Example of Submitting An Icon
• Updating an Icon
• Maintainer/Reviewer/Teams
• Our Workflows: how they work
• Common Bugs and Solutions
• Discord server
• Release strategy, conventions, preparation and execution
• Recommended resources and tools

Terms

Here are some terms that we will use in this repo:

1. "Technology" is used to describe a software, libraries, tool, etc...
2. "Icon" refers to the SVGs and icons version of a technology as a whole.
3. "SVG/SVG" refers to the svg versions of the Icons.
4. "icon" (lowercase) refers specficially to the font icon versions of the Icons.

What Icons Do We Accept?

Devicon only accepts Icons of development languages and tools.

Development refers to programming or programming-related jobs.

Tools can be software, OS, services, etc. that helps with development. It must be specifically related to development (so software like Microsoft Word or Google Calendar won't be accepted since it's too general).

• Tech companies used to be accepted in the repository. However, we do not accept them anymore. Icons like Facebook, Twitter, etc., are kept due to backward compatibility.
• We still accept their icons if they represent a service and not the company itself.
• Ex. AWS is accepted since their names refer to their services. We will not accept Amazon since that's the parent company that includes non-tech related tools
• Related fields like graphic designs or game development. Since many "development" jobs require people to know related fields, some softwares will be accepted in Devicon even though they aren't strictly "development tools".
• ex. some Adobe products, game engines, CMS, etc... See for more details.
• General tools that are well known in the tech industries. Things like Trello, Slack, etc., are accepted under this category. Unfortunately, we won't accept Discord since its use is still too general. This will be treated on a case-by-case basis.

Requesting an Icon

To request an icon, please create an issue in the repository, and follow these guidelines:

• Search for other issues already requesting the icon
• If an issue doesn't exist, create an issue naming it "Icon request: name-of-the-icon".
• Please create separate issues for each icon
• Use the Issue Template and fill out the proper information
• Please include links where the icon can be found. Ex: the icon's official webpage/wiki article.

Overview on Submitting Icons

Here is what you have to do to submit your icons to the repo.

1. Create the SVGs for each SVG versions that you have. Follow the convention listed.
2. Put the SVGs of each Icon into its own folders in /icons
3. Update the devicon.json to include the new Icon
4. Create a separated pull request (PR) towards the develop branch for each Icon.
5. Fill out the info as stated in the PR template.
6. Include the name of the Icon in the pull request title in this format: new icon: Icon name (versions)
7. Optional: Reference the issues regarding the new icon and label the PR `feature:icon`.
8. Some bots will check your SVGs. If there are any errors, please fix them as instructed.
9. Wait for a maintainer to review your changes. They will run the peek-bot to check your icons.
10. If there are no issues, they will merge it using squash merging. If there are any problems, they will let you know, and give you a chance to fix them.

Note: Due to our recent bot upgrades, icon contributors don't have to optimize/minify their SVGs anymore!

Versions and Naming Conventions

For the technology name, make the file and folder name lowercase and concatenate them. For example:

• AngularJS becomes angularjs or just angular
• Amazon Web Services becomes amazonwebservices
• Microsoft SQL Server becomes microsoftsqlserver

Each icon/SVG can come in different versions:

original: the original logo. Can contain multiple colors. devicon-original.svg	plain: a one-color version of the original logo. Note that the icon version will be stripped of all colors so you don't have to strip beforehand. devicon-plain.svg	line: a one-color, line version of the original logo. Note that the icon version will be stripped of all colors so you don't have to strip beforehand. devicon-line.svg
original-wordmark: similar to the above but must contain the name of the technology. devicon-original-wordmark.svg	plain-wordmark: similar to the above but must contain the name of the technology. Note that the icon version will be stripped of all colors so you don't have to strip beforehand. devicon-plain-wordmark.svg	line-wordmark: similar to the above but must contain the name of the technology. Note that the icon version will be stripped of all colors so you don't have to strip beforehand. devicon-line-wordmark.svg

Notes:

• You don't need to have 6 versions for each icon. An icon can only have one or two versions available. Just keep in mind that the minimum is 1 and the maximum 6 (for now). You must also have at least one version that can be make into an icon.
• The plain and line versions (with or without wordmark) are designed to be available in the final icon font.
• The original SVG version do not need to be simple and can contain numerous colors/gradients. However, if it's intended to be made into an icon, keep it simple.
• Some icons are really simple (ex. Apple), so the original version can be used as the plain version and as the icon font. In this case, you'll only need to make one of the version (either original or plain) and name them original.
  • If you are a long time contributor: aliases are no longer mandatory. If you are wondering which name to use, just pick original

SVG Standards

Before you submit your logos/SVGs, please ensure that they meet the following standard:

• The background must be transparent.
• The icon is centered horizontally and vertically within the viewBox.
• The SVG name follows this convention: (Technology name)-(original|plain|line)(-wordmark?).
• The plain and line versions (with or without wordmark) need to stay as simple as possible. They must have only one color and the paths are united. The color will be removed when being turned into icons so the .svg can have any color.
• Each .svg file contains one version of an icon in a 0 0 128 128 viewbox. You can use a service like resize-image for scaling the SVG.
• The icon's strokes and texts must be fills. This is to satisfy our conversion website's requirements.
• Each .svg must use the fill attribute instead of using classes for colors. This is to prevent class name clashing when using inline SVG. See here for more details.

Organizational Guidelines

• Each icon has its own folder located in the icons folder.
• The folder name must matches the name value uses for the SVG files. Ex: `react-original.svg` should go inside a `react` folder, `microsoftsqlserver` icons should go inside a `microsoftsqlserver` folder.
• All the .svg files for the Icon must go in the same folder.
• Optional: Each folder may contain one .eps file. The .eps file should contains all available versions of an icon. Each version is contained in a 128px by 128px artboard

Updating the devicon.json

Before you open a PR into Devicon, you must update the devicon.json. This is essential for our build script to work and to document your work.

Here is the object that each of your Icon must have:

  
    {
        // the official name of the technology. Must be lower case, no space and don't have the dash '-' character.
        "name": string, 

        // list of tags relating to the technology for search purpose
        "tags": string[], 

        // keep tracks of the different versions that you have.
        "versions": {
            // list the SVGs that you have 
            "SVG": VersionString[], 

            // list the fonts acceptable versions that you have
            "font": VersionString[] 
        },

        // the main color of the logo. Only track 1 color
        "color": string, 

        // keeps track of the aliases for the font versions ONLY
        // see the Example section for more details
        // NOTE: this attribute is not required from now on (see this)
        // it is only being kept for backward compatibility
        "aliases": AliasObj[] 
    }
  

Here is what VersionString means:

1. It's the version part of an SVG file's name
2. If you have "html5-original", the version string would be "original"
3. If you have "react-line-wordmark", the version string would be "line-wordmark"
4. See naming conventions section for more details

Here is the AliasObj interface:

     
    {
        "base": VersionString, // the base version
        "alias": VersionString // the alias version that's similar to the base version
    }
  

Example of Submitting An Icon

As an example, let's assume you have created the SVGs for Redhat and Amazon Web Services logos.

For the Redhat SVG, you have the "original", "original-wordmark", "plain", and "plain-wordmark" versions.

For the Amazon Web Services SVGs, you have the "original", "original-wordmark", "plain-wordmark" versions. The "original" version is simple enough to be a "plain" version as well. Note that we are not using the acronym AWS.

1. Put the SVGs for each logo that you have into its own folders in /icons
   • This means you would create two folders: one for amazonwebservices and one for redhat
   • Note: don't do this in the same commits; we want to have each Icon in its own PR.
2. Update the devicon.json
   • For redhat, you would do this

               
                 {
                   "name": "redhat",
                   "tags": [
                     "server",
                     "linux"
                   ],
                   "versions": {
                     "SVG": [ // here are the versions that are available in svgs
                       "original",
                       "original-wordmark",
                       "plain",
                       "plain-wordmark"
                     ],
                     "font": [ // here are the versions that will be used to create icons
                       "plain",
                       "plain-wordmark"
                     ]
                   },
                   "color": "#e93442", // note the '#' character
                   "aliases": [] // no aliases in this case
                 },
               
             

   • For the amazonwebservices, you would do this

               
                 {
                   "name": "amazonwebservices", 
                   "tags": [
                     "cloud",
                     "hosting",
                     "server"
                   ],
                   "versions": {
                     "SVG": [ // here are the versions that are available in svgs
                       "original",
                       "original-wordmark",
                       "plain-wordmark"
                     ],
                     "font": [ // here are the versions that will be used to create icons
                       "original", // "original" is simple enough to be used as the plain icon so we'll add "plain" to the aliases below
                       "plain-wordmark",
                       // note that the alias "plain" is not listed here. It must be listed in the `aliases` attribute
                     ]
                   },
                   "color": "#F7A80D", // note the '#' character
                   "aliases": [
                     {
                         "base": "original", // here is the base version that we will upload to Icomoon
                         "alias": "plain" // this is its alias. Our script will create a reference so users can search using "original" or "plain" for this icon
                         // note that you don't provide aliases for the SVG version. If "original" can't be made into a font, there's no need to provide it with a plain alias
                         // note that this is now optional. You do not need to create aliases from now on. The attribute needs to stay though.
                     }
                   ]
                 }
               
             

3. Create a separate pull request (PR) for each Icon.
   • This means you would have to create one PR for Amazon Web Services and one PR for Redhat.
4. Include the name of the icon in the pull request. Follow this format: "new icon: Icon name (versions}})"
   • For Amazon Web Services, your PR title should be "new icon: amazonwebservices (original, original-wordmark, plain-wordmark)"
   • For Redhat, your PR title should be "new icon: redhat (original, original-wordmark, plain, plain-wordmark)"
5. For the rest of the steps, you can follow Overview on Submitting Icon

Updating an Icon

Sometimes, a company will update their logo or someone spotted an error in the SVG/icon that needs to be fixed. This means the current icon in our repository might need an update. The steps to do this is simple:

1. Create a new commit to fix the SVGs.
2. Open a pull request based on the `develop` branch.
3. IMPORTANT: name the pull request update icon: icon-name (versions). Basically, follow the Overview on Submitting Icon but replace the new with update in name of request with the above.
4. Follow the rest of the steps as laid out in Overview on Submitting Icon.

Maintainer/Reviewer/Teams

Devicon is living by it's contributors and maintainers. Everyone can and is asked to contribute to this project. You don't have to be in a team to contribute!

The branches master and develop are protected branches and only members with corresponding permissions (see teams below) are able to push changes to them. Additional branches must follow the pattern username/feature/description. The /feature/ indicates that a change is made to existing code (regardless if it's a fix, refactor or actual feature). The naming convention is based on the gitflow-workflow.

For organisational purposes we introduced teams with permissions and responsibilities:

Supporter (@devicons/supporter)

Members of this team are responsible for reviewing pull request (auto assigned), managing issues and preparing the upcoming release.
Supporters have Write access to the repository (allowing them to create own branches) and are allowed to push changes to the develop branch (pull request and status checks required).

Maintainer (@devicons/maintainer)

Maintainer role inherits from the 'Supporter' role and adds Maintainer permission to the repository. Members of this team are allowed to publish a new release (push master branch after pull request and status checks).

Wanna join the team? Please open a public discussion where you introduce yourself.
New member requests have to be approved by all active members of the team Maintainer. Every member of this team has a veto permission to reject a new member.

The Build Script: how it works and its quirks

We rely on GitHub Actions, Python, Selenium, Imgur, and Gulp to automate our tasks. Please feel free to take a look at the workflow files. The codes should be clear enough to follow along.

Here are the main bots/script that we use:

• peek-bot: Upload the icons to Icomoon and see what it looks like. Doesn't download any icons at this time.
• build-bot: Build the icons by uploading them to Icomoon and download the resulting icon files. Also update the css file
• optimize-bot: Optimize the SVGs by minifying them and prefixing their IDs with the file names. This is done so using inline SVGs from this repository will not cause ID clash.
• check-SVG-bot: Check the SVGs uploaded and ensure they have the correct view box, fills, etc..
• npm-release-bot: Update the NPM package.
• release-message-bot: Create the release message for the PR.

Here are the modular tasks in the build script:

• Upload SVGs to icomoon.io and get the icons back. For details, see the original disscussion, this PR that introduce the feature and the final changes to it. Used by peek-bot and build-bot.
• Preview what an SVG would look like as an icon using the upload svgs script (see this). Used by peek-bot.
• Build, combine, and minify CSS files. For details, see this. Used by build-bot.
• Send screenshots to Imgur and upload it to a PR. See the PR for the Imgur action and the PR for uploading the pictures to a PR. Used by peek-bot and build-bot.
• Ensure code quality is up to standard
• Comment on the PR so maintainers don't have to manually upload icon result. Used by peek-bot and build-bot.
• Publishing a new release to npm; See #288
• Creating a list of features that was added since last release. See this discussion for inception and limitations.

Common Bugs and Solutions

There are some bugs that the build scripts might run into. Listed below are the common ones and their solutions

1. No connection could be made because the target machine actively refused it. (os error 10061)
   • See this action for an example.
   • Caused by Selenium being unable to connect to the Icomoon website. It is unknown why this happens but the hypothesis is Icomoon blocks Selenium's multiple connection request and treats them as bots. See this.
   • Solution: wait for a few minutes and rerun the script. Repeat until it works.
2. SHA Integrity
   • See this action for an example.
   • Caused by the package-lock.json. Most likely the result of a dependabot update but not 100% sure.
   • Solution: Remove the package-lock.json and run `npm install` to generate a new file. Commit and push.
3. Wrong PR Title
   • The bot-peek script relies on the PR title to find the icon that was added in the PR. If the format doesn't match what is specified in Overview on Submitting Icon, the bot will fail.
   • Solution: Ensure the name of the PR follows the convention.
4. Icon created by Icomoon contains strange lines that aren't in the SVG
   • See this PR's peek result.
   • This is caused by a bug in Icomoon's parser (see this).
   • Solution: Luckily this is an extremely rare case. Try remaking the SVG in a different way (using different paths/shapes). If your text/paths are joined with another object (say, the logo), try splitting them into individual paths (see this PR). You can always test using Icomoon to see if your fix works.

Discord server

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. If you don't have a GitHub account but want to suggest ideas or new icons, you can do that here in our Discord channel. The Discord server is unofficial, and Devicons is still being maintained via GitHub.

Release strategy, conventions, preparation and execution

Release strategy

Devicon does not follow a strict release plan. A new release is depended on current amount of contributions, required bugfixes/patches and will be discussed by the team of maintainers.

Generally speaking: A new release will be published when new icons are added or a bug was fixed. When it's predictable that multiple icons are added in a foreseeable amount of time they are usually wrapped together.

Conventions

The version naming follows the rules of Semantic Versioning. Given a version number MAJOR.MINOR.PATCH, increment the:

• MAJOR version when you make incompatible API changes,
• MINOR version when you add functionality (like a new icon) in a backwards compatible manner, and
• PATCH version when you make backwards compatible bug fixes.

Release preparation and execution

1. Define the next release version number based on the conventions
2. Checkout development as draft-release branch
3. Bump the package version using npm version vMAJOR.MINOR.PATCH -m "bump npm version to vMAJOR.MINOR.PATCH" (see #487)
4. Push the branch draft-release
5. Manually trigger the workflow build_icons.yml (which has a workflow_dispatch event trigger) and select the branch draft-release as target branch. This will build a font version of all icons using icomoon and automatically creates a pull request to merge the build result back into draft-release
6. Review and approve the auto-create pull request created by the action of the step above
7. Create a pull request towards development. Mention the release number in the pull request title (like "Build preparation for release vMAJOR.MINOR.PATCH).
   • Add information about all new icons, fixes, features and enhancements in the description of the pull request.
   • Take the PRs/commits as a guideline. It's also a good idea to mention and thank all contributions who participated in the release (take description of #504 as an example).
   • We now have a script that will do this for us. Check the `build-bot`'s PR message in the last step. There should be a section where it displays the features that have been added to the release. You can copy the markdown there and use it for the release message.
8. Wait for review and approval of the pull request (you can perform a squash-merge)
9. Once merged create a pull request with BASE master and HEAD development. Copy the description of the earlier pull request.
10. Since it was already approved in the 'development' stage a maintainer is allowed to merge it (DON'T perform a squash-merge).
11. Create a new release using the format "Release vMAJOR.MINOR.PATCH" as tag and release title. Use the earlier created description as description of the release.
12. Publishing the release will trigger the npm_publish.yml workflow which will execute a npm publish leading to a updated npm package (vMAJOR.MINOR.PATCH).

Recommended resources and tools