Docs

Example
Specifying Icons
Themed Icons
Centering Icons
Icons List

Example

Specifying Icons

Copy and paste the code block below into your readme to add the skills icon element!

Change the ?i=js,html,css to a list of your skills seprated by ","s! You can find a full list of icons here.

[![My Skills](https://skillicons.dev/icons?i=js,html,css,wasm)](https://skillicons.dev)

Themed Icons

Some icons have a dark and light themed background. You can specify which theme you want as a url parameter.

This is optional. The default theme is dark.

Change the ?theme=light to either dark or light. The theme is the background color, so light theme has a white icon background, and dark has a black-ish.

Light Theme Example:

[![My Skills](https://skillicons.dev/icons?i=java,kotlin,nodejs,figma&theme=light)](https://skillicons.dev)

Centering Icons

Want to center the icons in your readme? The SVGs are automatically resized, so you can do it the same way you'd normally center an image.

<p align="center">
  <a href="https://skillicons.dev">
    <img src="https://skillicons.dev/icons?i=git,kubernetes,docker,c,vim" />
  </a>
</p>

Icons List

Here's a list of all the icons currently supported. Feel free to open an issue to suggest icons to add!

Icon ID	Icon
`ae`
`angular`
`bash`
`c`
`cs`
`cpp`
`clojure`
`cloudflare`
`coffeescript`
`css`
`dart`
`deno`
`docker`
`figma`
`git`
`go`
`godot`
`grafana`
`haxe`
`html`
`ae`
`java`
`js`
`jenkins`
`jquery`
`kotlin`
`kubernetes`
`linux`
`lua`
`md`
`mongodb`
`mysql`
`nextjs`
`nginx`
`nodejs`
`nuxtjs`
`ps`
`php`
`postgres`
`pr`
`prisma`
`prometheus`
`py`
`r`
`rails`
`react`
`redis`
`regex`
`remix`
`ruby`
`rust`
`sass`
`solidity`
`scala`
`svelte`
`swift`
`tailwind`
`ts`
`unity`
`vim`
`vue`
`wasm`
`wordpress`
`workers`
`zig`