Icons Libre Kiwi

Icon toolkit full CSS/SVG based on Font Awesome Free set.

Compare

Features

| | Font Awesome6.5.x | Icons LK0.3.x | Notes | | -- | :--: | :--: | -- | | Relative sizing | ✔️ | ✔️ | xs, sm, lg, 1x,… 9x | | Fixed-Width | ✔️ | ✔️ | | | Icons in a List | ✔️ | ✔️ | + a lighter syntax that avoids wrapping the icon with a <span class="fa-li"/> | | Rotation & flip | ✔️ | ✔️ | - IE support dropped | | Animations | ✔️ | ✔️ | spin, pulse + grow, glow | | Position utilities | ✔️ | ✔️ | pull + margin, block, flex | | Color utilities | ✔️ | ✔️ | inverse + white (.fa-inverse = .lk-white) | | Stacking | ✔️ | ✔️ | | | Shaping | | ✔️ | lighter than stacking | | Power transform | ✔️ | | | | Masking icons | ✔️ | | | | Layering, text & counter | ✔️ | | | | Duotone icons | ✔️ | (✔️) | not tested ; basic use should work but coloring or changing opacity should not |

Syntax

The HTML syntax is the same as that of Font-Awesome except that it is not necessary to add aria-hidden="true" for accessibility since screen readers will not have any exotic unicode characters to read.

<i class="lks lk-{icon-file-name}"></i>

You can see examples in test folder.

Files size

In Icons LK, icons can be picked to reduce the the final bundled size easily¹, in the table above we compare the default files (css, svg, js) needed to display every icons in the free Font Awesome set (brands, regular and solid)

| | Font Awesome6.5.x || Icons LK0.3.x || | -- | -- | -- | -- | -- | | CSS + Webfont | 440,1kB(401,9kB min) | 4 files | — || | JS + SVG | 1,6MB (1,5MB min) | 1 files | — || | SVG Sprites | 1,5MB | 3 files | — || | CSS + SVG | — || 1,9MB(1,9MB min) | 1 file |

¹ You just need to copy icons-custom.scss and main-custom.scss in your project and then uncomment the line corresponding to the icon name in icons-custom.scss; ~ is a Webpack alias for node_modules folder, you may need to adapt to your environment.