Built on Simple Icons
This project is built on SVG icons downloaded from simpleicons.org.
Here is basic usage of an icon directly from that site:
<img src="https://simpleicons.org/icons/python.svg" width="30" height="30" />
There are hundreds of icons there. So to make it easily to look-up the ones which are relevant to technologies and brands I use, I put them here in one place in a small repo.
I serve the assets as a static GitHub Pages site. And the load them on my other projects.
I can bundle all the logos in one file and then reference them by ID, to reduce the number of files to be fetched.
Changes to SVGs
Another reason for using this repo is that I tweak the SVGs to suit my purposes and then easily reuse that across my repos, to avoid duplicating altered SVGs in all my projects.
If you use
img for an SVG, you can’t use CSS to change the color of the CSS. So I go for a different approach. A change I made is setting an
fill values on each CSV. This combination allows reference an SVG using the
svg HTML element (rather than
img) and therefore also more control over the color by CSS set outside the SVG element.
Rather than hardcoding the color in the SVG, I go for a more flexible approach of setting
fill="currentColor", which makes the SVG use the color as set on the outer element (such as
div or even of
Note that the ID used is
logo-python for example, to avoid conflicts with a possible
python ID elsewhere on the page where the SVG is used.
The size of the SVG can be controlled using a
class set on the
svg or outer
logo-medium. This is not set on the SVG itself, to allow freedom (though I might make small and medium versions of the SVGs under different URLs).
Further, I collect the colors by hand from the repo (each brand has a hex color) and add this to CSS which can be applied in your
head tag if needed. I also mark the color as light or dark, for readability. For example, if you use a dark purple color for a brand, then you need to use white for the SVG and text label and not black.
The hex colors can be found on the main Simple Icons website or in this simple-icons.json in the repo.
The latest SVGs can be downloaded to this repo using a script that is run manually, then committing the changes.
The script automates setting of appropriate custom values (
fill), so that is applied each time whether updating or adding a logo. So that doesn’t have to be done by editing a SVG file by hand.
This project provides optional CSS for handling SVG colors or colors of a background behind the SVG or text label.
There is also CSS setting the size of the logo (or just copy the classes and dimensions to your repo).