How to resize feather icons

Feathericons is a simple open source icon library. by default icon size is 24px.

You can use following simple html template on a blank page if you are starting from scratch.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Or you can install using npm / yarn

npm install feather-icons --save

Once you setup the basic layout, you can include following CSS

.feather-16{
    width: 16px;
    height: 16px;
}

.feather-24{
    width: 24px;
    height: 24px;
}

.feather-32{
    width: 32px;
    height: 32px;
}

Finally you can use the css classes to set icon size as required.

Full html code is below

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- icon size 16 -->
    <i class="feather-16" data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

Let me know your feedback in comments.

And in case you are using Laravel see how you can use laravel mix to bundle all css in libraries such as feather icons into one file.

Extract css in node_modules using laravel mix

Web development