Creating custom Feather icon sizes

Feather icons is a large open-source collection of SVG icons to use on the web. Usage is easy and requires just one file request.

By default, there are no size classes for the icons however implementing one is easy to do.

A CodePen example:

To use Feather icons include the following:

<script src="https://unpkg.com/feather-icons"></script>
<script>
feather.replace();
</script>

Feather icon elements with the sizing classes:

<i class="icon-sml" data-feather="wifi"></i>
<i class="icon-med" data-feather="wifi"></i>
<i class="icon-lrg" data-feather="wifi"></i>

The CSS classes:

.icon-sml {
    width: 15px;
    height: 15px;
}

.icon-med {
    width: 25px;
    height: 25px;
}

.icon-lrg {
    width: 35px;
    height: 35px;
}

All this does is define a width and height value in pixels, any of the CSS units will work.

You can also colour the icons by adding a color parameter to the CSS class:

color: #0d6efd;