Awesome

Akar Icons

Akar is a perfectly rounded icon library made for designers, developers, and pretty much everyone. Use this library to bring life into your user interface and experience. Free to use for your personal and commercial projects. Start creating! Explore all of our icons at akaricons.com.

Usage

There are currently 2 ways of implementing Akar Icons library to your website. The simplest one is through the Icon Fonts library just like Font Awesome and the other one is the React component package.

1. Icon Fonts

This method is the simplest to use because you only need to add the script to the document <head>, and reference the icons with an <i/> tag along with the appropriate class. Icon fonts are HTML/CSS under the hood so you can style and manipulate it just like any other HTML element.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/akar-icons-fonts"></script>
  </head>
  <body>
    <!-- EXAMPLE ICONS -->
    <i class="ai-cross"></i>
    <i class="ai-circle"></i>
    <i class="ai-heart"></i>
  </body>
</html>

Check out the full documentation at akar-icons-fonts repo page.

2. React Components

The React icon component library can be installed through npm. All icons can be configured with inline props with color, size, and strokeWidth including inline style objects.

import { ArrowRight, Star, LinkOut } from 'akar-icons';

const MyComponent = () => {
  return (
    <div>
      <ArrowRight />
      <Star color="yellow" size={32} strokeWidth={3} style={{ display: "block" }}/>
      <LinkOut />
    </div>
  );
};

export default MyComponent;

Check out the full documentation at akar-icons repo page.

Related Projects

akar-icons - Akar icons as React components.
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)