Devapix

Ways of use: devicon.js

To use <devicon> tag with pure JavaScript you just need to add Devapix script into your .html file.

<script src="https://devapix.vercel.app/js/devicon.js"></script>

Double click to copy

Let's take a look at an example.

index.html

<html>
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <script src="https://devapix.vercel.app/js/devicon.js"></script>
  <body>
    <devicon icon="csharp"/>
  </body>
</html>

Double click to copy

Note that <script> is inserted before <body> and <devicon> is inside <body>.

devicon.js script allows <devicon> tag to work properly and convert it, when the page is loaded, to an <img> with the proper API request in its src attribute.

Example

index.html <body> - Code

<body>
  <devicon icon="csharp"/>
</body>

Double click to copy

index.html <body> - After page loads

<body>
  <img src="https://devapix.vercel.app/api?csharp"/>
</body>

Double click to copy

Request

https://devapix.vercel.app/api?csharp

Double click to copy

Response

The properties expected by <devicon> are the same of API request.

Property

Value

icon | i (required)

string

release | r

string

version | v

original | o

plain | p

line | l

original-wordmark | ow

plain-wordmark | pw

line-wordmark | lw

color | c

string

theme | t

dark | d

light | l

size | s

string

Here we have two more examples of <devicon> using the rest of properties.

Facebook icon

Code

<devicon 
  icon="facebook" 
  release="2.7" 
  version="plain" 
  color="#c7bd2b" 
  size="64"/>

Double click to copy

Request

https://devapix.vercel.app/api?facebook&release=2.7&version=plain&color=c7bd2b&size=64

Double click to copy

Response

ChakraUI icon

Code

<devicon 
  i="chakraui" 
  r="dev" 
  v="o" 
  t="d" 
  s="64"/>

Double click to copy

Request

https://devapix.vercel.app/api?chakraui&r=dev&v=o&t=d&s=64