Akar Icons Icons

Browse 454 free Akar Icons SVG icons. Download SVG, copy as JSX, PNG or Base64. MIT licensed. Designed by Arturo Wibawa. Styles: Precise Shapes, Has Padding, Uses Stroke.

454 icons MIT UI 24px 24px grid by Arturo Wibawa
⌘+F

Copy & download Akar Icons icons

Click any icon above to open the detail panel. Four export formats are available instantly — no sign-up required.

SVG

Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.

JSX / TSX

React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.

PNG

Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.

Base64

Inline data URI — embed icons in CSS background-image, email HTML, or anywhere an image URL is needed.

Works with shadcn/ui

Copy the JSX format and paste directly into any shadcn/ui component. Alternatively, install akar-icons and use via @iconify/react — fully tree-shakeable, no icon font loading required.

About Akar Icons

Akar Icons is a carefully curated set of 390+ minimal outline SVG icons designed by Arturo Wibawa, each drawn on a precise 24px grid with a consistent 1.5px stroke. The library intentionally maintains a small, high-quality vocabulary — covering essential UI actions without the icon bloat of larger libraries. MIT licensed and free for personal and commercial use. An official React package (@akar-icons/react) is available alongside Iconify integration for framework-agnostic use. Search Akar Icons, copy SVG to clipboard, export as React JSX, and download as PNG here. Akar's hand-crafted aesthetic gives each icon a slightly more distinct personality than the rigid pixel-grid output of larger automated sets — visible in rounded corners, optically-balanced proportions, and deliberate negative space. Compared with Lucide, Akar offers fewer icons but arguably higher craftsmanship per icon. Ideal for minimal design systems, SaaS products with a human brand voice, creative portfolios, and interfaces where every icon in the set is intentionally chosen.

Created By

Arturo Wibawa Visit Website

License

MIT View License

Features & Tags

Precise Shapes Has Padding Uses Stroke

Pack Details

Version

1.9.31

v1.9.31

Color Support

Monochrome

Category

UI 24px

How to use Akar Icons icons

Icon Set Version

v1.9.31

Package

akar-icons

License SPDX

MIT

Grid Size

24px

Sample Icons

paper, pencil, location

Install

bash 
npm install akar-icons

React

tsx 
import { Search, Home, Gear } from 'akar-icons';

export default function App() {
  return <Search size={24} strokeWidth={1.5} />;
}

Via Iconify · HTML

html 
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="akar-icons:icon-name" width="24"></iconify-icon>

Via Iconify · any framework

tsx 
import { Icon } from '@iconify/react';

export default function App() {
  return <Icon icon="akar-icons:icon-name" width={24} />;
}

Package stats

Build-time npm metadata cached weekly • Last refresh May 12, 2026

akar-icons

A perfectly rounded icon library made for everyone.

v1.9.31
Score 59%
Popularity 15%
Quality 62%
Maintenance 100%

License

MIT

Weekly downloads

760

Monthly downloads

4,656

Total downloads

54,320

Unpacked size

582 KB

Last published

Mar 21, 2024

Registry updated

Mar 21, 2024

npm Repository Homepage

Compare Akar Icons with similar icon packs

Lucide Feather Icons Heroicons

Frequently Asked Questions

Install npm install @akar-icons/react, then: import { SearchIcon } from "@akar-icons/react";.

Yes. Akar is a curated set — covering essential UI actions without library bloat. The focus is on optical quality rather than quantity.

Both share the minimal 24px outline aesthetic, but Akar is more curated (390+ icons vs 1,500+). Akar's icons often feel slightly more distinct and hand-crafted.