Important
NOTE: The older project has apparently been abandoned, this project is an open source continuation that aims to improve the search algorithm for icons with mixed themes, as well as caching heavy information such as the database in memory and repeated requests.
- Docs
- Specifying Icons
- Themed Icons
- Icons Per Line
- Centering Icons
- Pull Request Guide
- 💖 Support the Project
Copy and paste the code block below into your readme to add the skills icon element!
Change the /icons?i=js,html,css to a list of your skills separated by ","s! You can find a full list of icons here.
[](https://skill-icons.hallexcosta.com)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 /icons?i=<theme>:<icon-id> to either original, dark or light. The theme is the background color, so light theme has a white icon background, and dark has a black-ish, if theme is not informed, the default theme is applied.
Random Theme Example:
[](https://skill-icons.hallexcosta.com)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://skill-icons.hallexcosta.com)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://skill-icons.hallexcosta.com/icons?i=git,kubernetes,docker,c,vim">
<img src="https://skill-icons.hallexcosta.com/icons?i=git,kubernetes,docker,c,vim" />
</a>
</p>
- Ensure that the icon have a size 256x256 (width x height).
- Ensure that format of icon is
svg - Ensure that the icon name have at least a of themes
original,darkorlight - Ensure that the corner radius (border radius) is equal 60
- If you want add only 1 icon, you can define the name using
original:<youricon> - Ensure that icon dont have a separator flag as (
\,_,-,#,@, etc) in icons with compound name to prevent conflicts
❌ Incorrect
original:styled-components
original:styled#components
original:styled_components
✅ Correct
original:styledcomponents
- Ensure that the icon dont have repeat alias name
- Ensure the theme is also in the alias name
❌ Incorrect
Important
Note that the java alias is already being used by another icon, so it cannot be added in javascript.
{
"javascript": {
"alias": [
"javascript",
"java",
"original:javascript",
"dark:javascript",
"light:javascript"
],
"themes": [
"original",
"dark",
"light"
]
},
"java": {
"alias": [
"java",
"original:java",
"dark:java",
"light:java"
],
"themes": [
"original",
"dark",
"light"
]
}
}✅ Correct
Important
Note that I have now changed the alias name to js and added it in javascript, as it is not being used by another icon.
I have also made sure that the themes are being set to that alias as well.
{
"javascript": {
"alias": [
"javascript",
"js",
"original:js",
"dark:js",
"light:js",
"original:javascript",
"dark:javascript",
"light:javascript"
],
"themes": [
"original",
"dark",
"light"
]
},
"java": {
"alias": [
"java",
"original:java",
"dark:java",
"light:java"
],
"themes": [
"original",
"dark",
"light"
]
}
}Thank you so much already for using my projects!
To support the project directly, feel free to open issues/discussions for icon suggestions, or contribute with a pull request!