# AkarIcons Web Components
  [](https://www.npmjs.com/package/akar-icons-web-components)  [](https://www.jsdelivr.com/package/npm/akar-icons-web-components)
[AkarIcons Web Components](https://github.com/awmleer/akar-icons-web-components) is a non-official [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) wrapper for the amazing [AkarIcons](https://akaricons.com/).
Also a handy icon framework for dynamically customizable icons.
## Features
- Framework **INDEPENDENT**, [AkarIcons Web Components](https://github.com/awmleer/akar-icons-web-components) can be **DIRECTLY** used in **ANY** frameworks: [React](https://reactjs.org/), [Vue.js](https://vuejs.org/), 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](https://dev.to/johntheo/lazy-loading-svg-icons-using-web-components-3foi)! 📄
## Getting Started
```html
```
And voilà, the icon is ready.
[](https://codepen.io/john-theo/pen/LYLddpd)
Play around with [the CodePen](https://codepen.io/john-theo/pen/LYLddpd).
## Advanced Usage
### Appetizer
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](https://akaricons.com/) without the `ai-` prefix, eg. `arrow-left`
### Main Course
Everything the menu changes, is simply attributes for the `` tag.
So `` 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linecap) and [here](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-linejoin).
Try the following examples:
```html
```
```html
```
Or set a universal style for all ``s:
```html
```
And yes, it's that simple! 😇
## Features (may be) Coming
- Visual alignment adjustment configs
- Framework(React, etc)-friendly wrappers
- Dichromatic Icons
- SVG ANIMATIONS 🤟
- Use