Skip to content

Bootstrap 5 Feather Icons

Feather Icons

Feather is a set of 250+ simple and beautiful open source SVG icons. Each icon is designed on a 24x24 grid with a focus on simplicity, uniformity and adaptability. The library is fully compatible with the Bootstrap admin template, AdminKit.

Example

html
<i data-feather="feather"></i>
<i data-feather="heart"></i>
<i data-feather="book"></i>

<!-- Only call `feather.replace` once on each page -->
<script>
  feather.replace()
</script>

Sizes

Fancy small or large icons? Change the size of icons using inline style attributes.

html
<i data-feather="feather" style="width:24px;height:24px;"></i>
<i data-feather="feather" style="width:36px;height:36px;"></i>
<i data-feather="feather" style="width:48px;height:48px;"></i>

<!-- Only call `feather.replace` once on each page -->
<script>
  feather.replace()
</script>

Color variants

Colorize icons with Bootstrap's text color utilities:

html
<i data-feather="feather" class="text-primary"></i>
<i data-feather="feather" class="text-secondary"></i>
<i data-feather="feather" class="text-success"></i>
<i data-feather="feather" class="text-danger"></i>
<i data-feather="feather" class="text-warning"></i>
<i data-feather="feather" class="text-info"></i>

<!-- Only call `feather.replace` once on each page -->
<script>
  feather.replace()
</script>

250+ icons

An overview of all available icons can be found on the official Feather Icons website.