An interface page to select the icons.
This project serves Devicon v2.15.1 icons¹ via API, that way you can edit the icon color and size on the fly.
- Only icons that can be converted to font, in other words, only monochromatic plain icons.
1. Overview
1.1. Selecting icon
1.2. Selecting theme or color
1.2.1. theme
1.2.2. color
1.3. Selecting version
1.4. Resizing
2. Examples
2.1. Markdown
2.2. HTML
2.3. Results
3. Dependencies
Use the base URL below to access the API.
https://deviconapi.vercel.app/
Through this documentation this base URL will be referred as <URL>/
Just add the icon name after the base URL. If no other parameter is added it will return the default icon in its default color with 128×128px of size.
Example
<URL>/csharp
<URL>/cplusplus
<URL>/javascript
You can choose the color of the icon by adding the theme or color parameter, using & after the icon name.
Is important to note that theme has priority over color parameter, so if both are present only theme will work.
This parameter receives light or dark as value.
In GitHub markdown you should use a wrapping logic. See the example below.
Example
<picture> <source media="(prefers-color-scheme: dark)" srcset="https://deviconapi.vercel.app/devicon?theme=dark&size=50"> <img alt="Devicon" title="Devicon" src="https://deviconapi.vercel.app/devicon?theme=light&size=50"> </picture>
Result
A dark color scheme is defined in source.media and srcset points to a dark themed icon #ffffff. If source.media is false, then the inner img will be shown instead and src should be pointing to a light themed icon #000000.
Example using dark
Next.js icon filled in #ffffff
<URL>/nextjs?theme=dark
Example using light
Next.js icon filled in #000000
<URL>/nextjs?theme=light
This parameter receives any hexadecimal color and CSS colors as value.
Note that hexadecimal colors can not have # on the request!
Hexadecimal colors can be in any of the following patterns: 2ff, 22ffff, abc5, aabbcc55.
Example using hexadecimal
JavaScript icon filled in #ff5656
<URL>/javascript?color=ff5656
Example using CSS color
JavaScript icon filled in #ff0000
<URL>/javascript?color=red
Sometimes, icons are in different versions and you can specify which one you want by passing a version value to version parameter.
Possible version values are: original, plain, line,original-wordmark, plain-wordmark and line-wordmark.
Remember that this API works only with monochromatic icons.
You can see all supported versions of each icon in this list.
Example using line
Apache icon in line version where default is plain.
<URL>/apache?version=line
If you are using Markdown you can resize the icon without add an img element with width attribute, for instance. Just add some value to the size parameter and you are ready to go.
Example using 50px
Node.js icon in 50×50px.
<URL>/nodejs?size=50
<img src="https://deviconapi.vercel.app/nodejs?theme=dark&size=80"/>
<img src="https://deviconapi.vercel.app/go?size=180&color=f0f"/>
<img src="https://deviconapi.vercel.app/go?version=original-wordmark&size=180"/>
| Description | Result |
|---|---|
|
nodejs theme: dark size: 80px |
|
| https://deviconapi.vercel.app/nodejs?theme=dark&size=80 | |
| Description | Result |
|---|---|
|
github color: #2ea043 size: 180px |
|
| https://deviconapi.vercel.app/github?color=2ea043&size=180 | |
| Description | Result |
|---|---|
|
github version: original-wordmark color: #1f6feb size: 180px |
|
| https://deviconapi.vercel.app/github?version=original-wordmark&color=1f6feb&size=180 | |
Based in Devicon and powered by Vercel
Made with ❤ by Josélio Júnior (Lunatic Fox)