Home

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.

<a href="https://akaricons.com" target="_blank"> <img alt="akar icons" src="https://repository-images.githubusercontent.com/306119910/c3a57000-2be0-11eb-88a2-2714f9bafcd4"> </a>

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

Author

Arturo Wibawa (@agwibawa)

License

MIT License, Copyright © 2020-present Arturo Wibawa.