A perfectly rounded icon library made for designers, developers, and pretty much everyone. Explore all of our icons at akaricons.com.
Install with npm:
npm install --save akar-iconsImport the icons you need into your React project and declare them in your render method:
import { ArrowRight, Star, LinkOut } from 'akar-icons';
const MyComponent = () => {
return (
<div>
<ArrowRight />
<Star />
<LinkOut />
</div>
);
};
export default MyComponent;Icons can be configured with inline props including inline style objects:
<Star color="yellow" size={32} strokeWidth={3} style={{ display: "block" }}/>| Prop | Description | Default |
|---|---|---|
color |
Set the icon color | currentColor |
size |
Set the width and height of the svg icon | 24 |
strokeWidth |
Set the stroke width of the icon | 2 |
style |
Add inline styles to the element | {} |
You can also import the whole icon library like this:
import * as Icon from 'akar-icons';
const MyComponent = () => {
return <Icon.ArrowRight />
};
export default MyComponent;Explore all of our icons at akaricons.com.
- akar-icons-app - Homepage repo of Akar icons.
- akar-icons-fonts - Akar icons as icon fonts.
- akar-icons-web-components - Akar icons as web components, fully customizable and use anywhere.
- akar-icons-svelte - Akar icons as Svelte components.
- blade-akar-icons - A package to easily make use of Akar Icons in your Laravel Blade views.
- akar_icons_flutter - Akar icons package for Flutter.
Arturo Wibawa (@agwibawa)
MIT License, Copyright © 2020-present Arturo Wibawa.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
