- Table of contents
- TODO:
- The setup process
- Themed Icons
- Icons Per Line
- Centering Icons
- New versions of icons to update
- New icons progress
- Icons List
- Self-hosting your own Clouflare worker
- Add most, if not all of the icons from the skill-icons issues tab.
- Add support for customisable gaps, padding, sizing, orientation
& rotation. - Possible support for clickable icons. (Correct links are not yet added to the icons)
- Possible different colour palettes.
- Possible auto light/dark theme mode.
- Remove the need for the SVGs to be kept on the worker, possibly host them in the repo.
- Create a website for custom icon picking.
- Add all the links to the icons corresponding to the tool/language.
- Add gaps to rows of icons.
The SVG can be embedded in two main ways, using Markdown or HTML. Both have the same result.
Markdown:

HTML:
<img src="https://icon-worker.filipsysak.workers.dev/icons?i=js,html,css" />
Icons are separated using commas, after the ?i=
parameter. You can find a full list of icons here.
Example: ?i=js,html,css

There are a couple of options for customisablity currently available, including padding, gaps, sizing, orientation and clickable icons.
All parameters have an alias which will work the same as the longhand name.
Padding can be added to the icons by appending &p=
or &padding=
to the link and adding the number in pixels.
The default size is set to 0
.
Example: .../icons?i=rust,go&p=50
Gaps can be added between the icons by appending &g=
or &gap=
to the link and adding the number in pixels. The default size is set to 0
.
Example: .../icons?i=rust,go&g=50
Sizing can be added to the icons by appending &s=
or &size=
to the link and adding the number in pixels. The default size is set to 48
.
Example: .../icons?i=rust,go&s=30
Orientation can be added to the icons by appending a &v
or &vertical
to the link. This parameter will make all icons vertical. The default orientation is horizontal.
Example: .../icons?i=rust,go&v
Icons can be clickable by appending &c
or &clickable
to the link. This parameter will enable icons to be clickable.
The link locations are yet to be added as a custom option. Icon links are also yet to be added.
Example: .../icons?i=rust,go&c
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:
[](https://skillicons.dev)
You can specify how many icons you would like per line! It's an optional argument, and the default is 15.
Change the &perline=3
to any number between 1 and 50.
[](https://skillicons.dev)
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>
Icon ID | Icon |
---|---|
firebase |
|
x |
|
deno |
|
css |
|
ocaml |
|
ember |
|
angular |
Here's a list of all the icons currently supported. Feel free to open an issue to suggest icons to add!
TODO readme :]