Awesome

akar-icons

A perfectly rounded icon library made for designers, developers, and pretty much everyone. Explore all of our icons at akaricons.com.

Get Started

1. Installation

Install with npm:

npm install --save akar-icons

2. Usage

Import 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.

Related Projects

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.

Author

Arturo Wibawa (@agwibawa)