I am working on a new project and I need a lot of brand icons. Users can add links to their profiles on other sites and I'd like to have support for as many of them as possible so it looks nice. FontAwesome _[1] already has a ton of brand icons built in but for some of the more "spicy" brands that you might want to use, it is a no-go.

After some searching and experimenting I compiled a method for doing this and it is working pretty great. I needed the control of two things to have my custom icons live side-by-side with the FontAwesome icons; color and size. FontAwesome icons can have their size controlled by an additional class fa-[SIZE]. For example fa-xl gives you an icon of 1.5em. Coloring of font-awesome icons is done with regular CSS font coloring.

The sizing is pretty easy, I just made similar classes (possibly I could even have just used the FontAwesome classes) like:

.icon-xl {
height: 1.5em;
width: auto;
}


The coloring was a bit trickier. I searched around and eventually found a StackOverflow answer _[2] that had a link to a tool_[3] which could give you the proper CSS filter values to convert a black image into the color of your choice.

With this in my toolbox I created classes to convert black pngs to the main color classes for my website. For example, the primary color is a shade of blue:


.icon-primary {
filter: invert(57%) sepia(39%) saturate(4422%) hue-rotate(192deg) brightness(99%) contrast(96%);
}


I made classes for all the colors I regularly use and that was all the CSS I needed. After that I found good versions of the icons I wanted, cleaned them up and turned them black in Pixelmator (does anyone else still use this?) and dropped them in the images directory of my project. Now when I want an only fans icon in white my HTML looks like this:


< img src="/assets/onlyfans_icon_black.png" class="icon-xl icon-white" />


And voila! I have my custom icon living side-by-side with the other FontAwesome brand icons and it looks great.