Display font awesome icons using SVG’s

Font Awesome SVG Icons List, Usage, CSS & Download

Sep 13, 2022

To display font awesome icons we can use their class name or CSS unique content code.

Another way is to use font awesome SVG icons.

What are SVG Icons ?

SVG stands for “Scalable Vector Graphics” and is an XML based, vector image format for defining two-dimensional graphics.

SVG icons are defined in a vector graphics format and stored in XML text files with an extension .svg

Advantages of Using SVG Icons?

There are few advantages of using SVG’s

Scaling : We can scale the SVG’s to any size without losing clarity
Small file sizes when compare to other image formats like .jpg,.png etc.
We can easily apply our own styles to the SVG images(like color etc).
We can embed SVGs directly into the HTML pages without downloading file.
SEO friendly : SVGs are XML-based i.e.,keywords, descriptions and links can be included so that the content more recognizable for search engines and improving overall accessibility.

Using Font Awesome SVG Icons.

Font awesome provides SVG icons (.svg file) for each icon in their library.

For example to display Angular Icon, use the following SVG code.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z"/>
</svg>

To display the font awesome icon copy paste the above SVG code in HTML pages.

If you see the output, the icon will take entire page width and height. But that’s not how icons should display.

As I explained above SVG icons can be easily resized without losing clarity.

So let’s add height and width to SVG tag.

<svg xmlns="http://www.w3.org/2000/svg" width=50 height=50 viewBox="0 0 448 512">
<path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z"/>
</svg>

Adding width and height to every SVG icon is not a good idea where you have to display to many icons in the website.

So we can add a class name to SVG icon and then apply styles to it.

Font Awesome SVG icon CSS

I am adding fontawesomesvg class to the above Angular icon.

<svg xmlns="http://www.w3.org/2000/svg" class="fontawesomesvg" viewBox="0 0 448 512">
<path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z"/>
</svg>

Add height and width to the font awesome svg icon class.

.fontawesomesvg{
  height : 30px;
  width:30px;
}

Font Awesome SVG icon color

Angular icon will be in red color.

To add color to the font awesome SVG icons use fill attribute.

.fontawesomesvg{
  height : 30px;
  width:30px;
  fill: red;
}

But font awesome just give us raw SVG code without class names.

So to apply CSS we have to use svg tag or enclose icon svg in a parent element.

<span class="fontawesomesvg">

<svg xmlns="http://www.w3.org/2000/svg" class="fontawesomesvg" viewBox="0 0 448 512">
<path d="M185.7 268.1h76.2l-38.1-91.6-38.1 91.6zM223.8 32L16 106.4l31.8 275.7 176 97.9 176-97.9 31.8-275.7zM354 373.8h-48.6l-26.2-65.4H168.6l-26.2 65.4H93.7L223.8 81.5z"/>
</svg>

</span>

And then add CSS to the svg tag

.fontawesomesvg svg{
  height : 30px;
  width:30px;
  fill: red;
}

Font Awesome SVG icons StackBlitz Demo

Here is the StackBlitz demo for font awesome SVG icons.

https://stackblitz.com/edit/font-awesome-svg-icons

Search & Download Font Awesome SVG Icons

Type the icon name in the below search box and click on the icon to download the svg file.

Or you can copy the SVG code.

The icons will be filtered in the below table.

click here to download all SVG’s

Total 2016 Icons.