Awesome

AkarIcons Web Components

Also a handy icon framework for dynamically customizable icons.

Framework INDEPENDENT, AkarIcons Web Components can be DIRECTLY used in ANY frameworks: React, Vue.js, you name it 🤗
With lazy loading icons, the main script weighs ~4KB, loading each uncached icon costs ~0.5KB increacement 🤩
Fully customizable, dynamically color changing is ancient, how about changing stroke-width and line-style ON THE FLY? 🤯

Read more about the design philosophies in this article! 📄

<script src="https://cdn.jsdelivr.net/npm/akar-icons-web-components" type="module"></script>

<body>
  <akar-icon name="bicycle">
</body>

And voilà, the icon is ready.

Play around with the CodePen.

Note on the top right corner of the CodePen, there is a dropdown menu. Open and have fun with it.

Value for the name field can be copied from AkarIcons homepage without the ai- prefix, eg. arrow-left

Everything the menu changes, is simply attributes for the <akar-icon> tag.

So <akar-icon name="air" size="50"> will be rendered as a 50px ✕ 50px AkarIcons air icon.

Attributes

Attribute	Type	Css Var	Default
`name`	`string`		(Required)
`size`	`number`	`--size`	`24`
`color`	`string`	`color`	`"inherit"`
`stroke`	`number`	`--stroke`	`1`
`cap`	`enum`	`--cap`	`"round"`
`join`	`enum`	`--join`	`"round"`

Valid values for cap and join can be found here and here.

Try the following examples:

<akar-icon name="bicycle" size="50" cap="butt" join="miter"/> </akar-icon>

<akar-icon name="air" stroke="2" style="transform: scaleX(-1)"/> </akar-icon>

Or set a universal style for all <akar-icon>s:

<style>
  akar-icon {
    --cap: butt;
  }
</style>

And yes, it's that simple! 😇

git clone git@github.com:awmleer/akar-icons-web-components.git
yarn run start