Guide · Open source
How to use skill-icons: add a skills banner to your GitHub README
Updated · written with AI from the project's own documentation and checked against our catalogue data
skill-icons is a hosted web service from the tandpfun project that builds one image of technology logos from a list you write in a URL, such as js,html,css. It is useful for a GitHub profile README or an online resume that needs a quick visual skills section. After this guide you will be able to build your own icon URL, change its theme and layout, and embed it with a Markdown or HTML snippet.
Skill Iconstandpfun/skill-icons · ★ 13.4k · MIT Install options & downloads Quick start
- 1Open the Icons List. Find the icon IDs for the technologies you want to show in the README's Icons List section.
- 2Build the URL. Start with https://skillicons.dev/icons?i= and add your IDs separated by commas.
- 3Add the Markdown snippet. Paste the wrapped link into your README, replacing the example IDs with yours.
- 4Set the theme. Add &theme=light if you want a white icon background; leave it out for the default dark theme.
- 5Set the layout. Add &perline= followed by a number from 1 to 50 to control icons per row; the default is 15.
- 6Center the image. Wrap the image in a paragraph with align="center" if you want it centered.
What skill-icons does and who it is for
skill-icons builds an image of technology logos from a list of icon IDs that you put in the URL. You paste the generated image link into your GitHub profile README or a resume to show your skills at a glance.
It suits developers who want a visual skills section on their GitHub profile, students or job seekers adding a skills banner to an online resume, and anyone who needs a quick embed without building or hosting anything. It is not a good fit if you must host the images on your own infrastructure, because the README describes the hosted skillicons.dev URL and does not document self-hosting.
Create your skills icon link
Copy the code block below into your README. Change the ?i=js,html,css part to a list of your skills separated by commas. The README gives the full list of icon IDs in its Icons List section.
The README notes the service runs on Cloudflare Workers, and the project is the one that maintains the icon set.
- Pick icon IDs from the Icons List, for example js, html, css or wasm.
- Separate IDs with commas and do not add spaces.
- Keep the wrapping link to https://skillicons.dev so the image links back to the service.
[](https://skillicons.dev)Choose a light or dark theme
Some icons have a dark and a light themed background. The theme is optional and the default is dark. The light theme gives the icon a white background, and the dark theme gives a black-ish background.
To use the light theme, add &theme=light to the URL. You can also set dark explicitly.
[](https://skillicons.dev)Set how many icons appear per line
The perline option controls how many icons sit on each row. It is optional and the default is 15. Set &perline=3 or any other number from 1 to 50.
[](https://skillicons.dev)Center the icons in your README
The SVGs are resized automatically, so you center the image the same way you would center any image. Wrap the image in a paragraph with align="center" as shown below.
<p align="center">
<a href="https://skillicons.dev">
<img src="https://skillicons.dev/icons?i=git,kubernetes,docker,c,vim" />
</a>
</p>Find icon IDs and request new ones
The Icons List in the README maps each icon ID, such as docker, figma or cloudflare, to its logo. Use the ID exactly as written in the table.
The README says icons are kept consistent and supported across browsers, so pull requests with new icon submissions are not accepted. If a technology is missing, open an issue on the project instead.
- Look up the ID in the Icons List table.
- If the icon you need is missing, open an issue rather than a pull request.
What people use it for
- Showing a skills banner on a GitHub profile README.
- Adding a visual skills row to an online resume page that accepts an image link.
- Displaying a stack of cloud tools, such as aws, gcp and azure, in a compact grid with perline=3.
- Sharing a light-themed set of icons on a page with a white background.
Frequently asked questions
How do I use skill-icons?
Paste the Markdown snippet from the README into your profile README and replace the example IDs with your own, separated by commas. The image is generated from the hosted skillicons.dev URL, so there is nothing to install.
Do I need to install anything to use skill-icons?
No. The README says to use the hosted service with no install needed, and it lists no prerequisites.
Is skill-icons free and what is its license?
The project is released under the MIT licence, as stated in its repository. The README does not mention pricing for the hosted service.
Can I host skill-icons myself?
The README does not document self-hosting. It describes using the hosted skillicons.dev URL, so self-hosting is not covered in the source.
Why is my icon missing?
Check that the ID matches the Icons List exactly. The README says new icons are added only through issues, not pull requests, so a technology not on the list is not available yet.
How does skill-icons compare to other tools?
The source lists no comparable projects, so this guide makes no comparison. It is a hosted image generator that builds one image from a list of icon IDs.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
skill-icons is a good choice if you want a quick, good-looking skills image for a GitHub README or resume without setting anything up. Skip it if you need to host the images yourself or need an icon for a technology that is not on the list, since new icons come only through issues.
Install options & downloads