In this section, Learn how to change feather icon

  • font size
  • color

You can check out my other post on setup in javascript and npm react project

Here are the steps to increase size of an feather icons.

  • Create an icon with class selector
    <i class="size-18" data-feather="archive"></i>
  • Create a CSS selector with height and width in pixel
  .size-18{
width: 16px;
height: 16px;
}

here is an complete example for updating feather icon size.

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <style>
  .size-18{
width: 16px;
height: 16px;
}
.size-28{
width: 24px;
height: 24px;
}
.size-38{
width: 38px;
height: 38px;
}
.size-48{
width: 48px;
height: 48px;
}
  </style>
  <body>

    <!-- archive icon change -->
    <i class="size-18" data-feather="archive"></i>
    <i class="size-28" data-feather="archive"></i>
    <i class="size-38" data-feather="archive"></i>
    <i class="size-48" data-feather="archive"></i>

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

How to change feather icon color

changing feather icon will not work with color attribute in CSS,

We have to use combination stroke and stroke-width attributes for a icon

for example, class selector in css

 .size-18{
width: 16px;
height: 16px;
stroke: green;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

Complete example feather icons for changing color to green

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <style>
  .size-18{
width: 16px;
height: 16px;
stroke: green;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.size-28{
width: 24px;
height: 24px;
stroke: green;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.size-38{
width: 38px;
height: 38px;
stroke: green;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.size-48{
width: 48px;
height: 48px;
stroke: green;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
  </style>
  <body>

    <!-- example icon -->
    <i class="size-18" data-feather="archive"></i>
    <i class="size-28" data-feather="archive"></i>
    <i class="size-38" data-feather="archive"></i>
    <i class="size-48" data-feather="archive"></i>

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