How To Use SVG Icons

If you ever used font icons then you know that it’s not easy to optimise the font file to include only the icons needed, and most of the time we end up using a CDN link with more than thousand icons and use only handful of them.

Using SVG icons greatly helps keeping website lightweight because this way we only include icons we need.

In this article I will show you how to use SVG icons with Bootstrap, but you can use the concept with other CSS frameworks as well.

Find the icon

First of all, find the icon you need and there will be either an option to copy the svg code (which is just HTML) or download it (which is just an HTML code in a text file with .svg extension). You can get icons from any of the following websites:

1. Font Awesome
2. Bootstrap Icons
3. Feather Icons
4. Icon Monster
5. Google Icons
6. Hero Icons
7. Hero Icons Dev

Prepare the icon

Now this might look like too much work but this needs to be done just once. Once you have the code for svg icon, either copied (from Bootstrap Icons) or downloaded (from Font Awesome), you need to edit it a little bit.

Here’s the svg icon copied from Bootstrap Icons

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-up" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>

To control the icon from CSS we need to add a class to the icon. You can name that class anything you like. I will use .si class, here ‘s’ for svg and ‘i’ for icons.

<!-- notice the class added -->
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="si" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>

To make sure that default styles of icon doesn’t disturb and to make it more lightweight, remove extra attributes. Also add some attributes for accessibility purpose, if you like. Here’s an example with Font Awesome Icon.

<!-- before cleaning up -->
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-up" class="svg-inline--fa fa-chevron-up fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path fill="currentColor" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
</svg>

<!-- after cleaning up -->
<svg aria-hidden="true" focusable="false" class="si" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
    <path fill="currentColor" d="M240.971 130.524l194.343 194.343c9.373 9.373 9.373 24.569 0 33.941l-22.667 22.667c-9.357 9.357-24.522 9.375-33.901.04L224 227.495 69.255 381.516c-9.379 9.335-24.544 9.317-33.901-.04l-22.667-22.667c-9.373-9.373-9.373-24.569 0-33.941L207.03 130.525c9.372-9.373 24.568-9.373 33.941-.001z"></path>
</svg>

Styling with CSS

Now we style the icons from CSS with class we decided. I will use .si class as decided earlier, but you might have decided a different name, so change the code accordingly.

.si {
    display: inline-block;
    height: 1.2em;
    width: 1.2em;
    vertical-align: middle;
    position: relative;
    top: -.0625em;
    text-align: center;
    stroke-width: 0;
    overflow: visible;
}

.si path {
    stroke: currentColor;
    stroke-width:2%;
}

Using icons

Now simply paste these icons in your HTML and they render crisp and clean. If you want to reuse the icons more easily then create vue, react or blade components. Here’s an example with VueJS.

<template>
<svg xmlns="http://www.w3.org/2000/svg" class="si" fill="currentColor" viewBox="0 0 16 16">
    <path fill-rule="evenodd" d="M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
</svg>
</template>

Now use it like a normal vue component.

<button class="btn btn-primary">
    <icon-chevron-up /> Click Here
</button>

Conclusion

Using svg icons might feel like an extra work but it increases the performance of your website. Make sure to not mismatch icons from different websites. This is because icons of Font Awesome look different from Hero Icons and if you use icons from different websites then the website will look a bit off. So just pick any one website for icons.