While working on optimizing some of my websites for speed, I decided to make use of inline SVG images instead of font icons such as Font Awesome. However, this lead to finding an option to change the color of the inline SVG. Here I am documenting how to achieve this change of color for your SVG via CSS.
Font icons such as Font Awesome are great and they provide a huge amount of ready to use and scalable shapes which can be used easily on a webpage, however having so many shapes has a downside on size and therefore the speed of the site. While there exits tools like icomoon app, which can create a custom set from these font icons, I decided to go with the inline SVG approach as I find it to be more flexible in long run.
Generating SVG from font icons
If you are wondering how to generate these SVG to be used inline from a font icon, then let me tell you that it is quite easy to do with icomoon app. You can simply select the icon you want to be converted into SVG using the icomoon app, and hit on Generate SVG at bottom.
Inline SVG color
When you use an inline SVG, instead of font icon, you may have the need of changing the color of these shapes so as to match the text. In order to be able to have the colors modifiable through CSS, we are going to use shapes defined with just path. Once we have that, we can simply use the CSS property “fill” to change their color as shown in code below.
svg {
fill: #27ae60;
} You can find the complete demo in the following codepen embed. The SVG icons I used here are generated from Font Awesome icons.
See the Pen SVG shapes with fill using CSS by Kanishk Kunal on CodePen.
If you are using RSS feed reader, or by any chance the embed above doesn’t appear then please visit the Pen live on CodePen
Inline SVG vs Icon Fonts
Before I end this post, I would like to point you to the following two articles which will help you decide between inline SVG and Icon fonts for your own projects.