IonIcons Icons

All Ionicons in one searchable grid: Outline, Solid, and Sharp variants. Copy SVG or JSX, download PNG. MIT licensed, by the Ionic Framework team.

1,357 icons MIT UI 16px / 32px 32px grid by Ben Sperry
Search icons...

More SVG Icons

accessibility

accessibility-outline

accessibility-sharp

add

add-circle

add-circle-outline

add-circle-sharp

add-outline

add-sharp

airplane

airplane-outline

airplane-sharp

alarm

alarm-outline

alarm-sharp

albums

albums-outline

albums-sharp

alert

alert-circle

alert-circle-outline

alert-circle-sharp

alert-outline

alert-sharp

american-football

american-football-outline

american-football-sharp

analytics

analytics-outline

analytics-sharp

aperture

aperture-outline

aperture-sharp

apps

apps-outline

apps-sharp

archive

archive-outline

archive-sharp

arrow-back

arrow-back-circle

arrow-back-circle-outline

arrow-back-circle-sharp

arrow-back-outline

arrow-back-sharp

arrow-down

arrow-down-circle

arrow-down-circle-outline

arrow-down-circle-sharp

arrow-down-left-box

arrow-down-left-box-outline

arrow-down-left-box-sharp

arrow-down-outline

arrow-down-right-box

arrow-down-right-box-outline

arrow-down-right-box-sharp

arrow-down-sharp

arrow-forward

arrow-forward-circle

arrow-forward-circle-outline

arrow-forward-circle-sharp

arrow-forward-outline

arrow-forward-sharp

arrow-redo

arrow-redo-circle

arrow-redo-circle-outline

arrow-redo-circle-sharp

arrow-redo-outline

arrow-redo-sharp

arrow-undo

arrow-undo-circle

arrow-undo-circle-outline

Copy & download IonIcons 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 ionicons and use via @iconify/react, fully tree-shakeable, no icon font loading required.

About IonIcons

Ionicons is the official icon library of the Ionic Framework, offering 1,400+ SVG icons in three variants: Outline (iOS-style open contours), Solid (Android/Material-style filled), and Sharp (geometric right-angle variant for Windows-style UIs). This three-variant system allows Ionicons to be genuinely cross-platform in a single icon set. Ionicons are MIT licensed and available as web components (<ion-icon>), plus React, Vue, and Angular packages. The web component approach delivers zero-JavaScript-bundle-size usage for HTML-first projects, icons load on demand via the CDN. Search Ionicons SVG, copy to clipboard, export as JSX, and download as PNG here. Compared with Lucide: Ionicons has a smaller, more curated catalog specifically designed for mobile-first interfaces. Compared with Phosphor: Ionicons uses platform-semantic variants (iOS/Android/neutral) rather than weight-based variants. Ideal for Ionic Framework apps, Capacitor hybrid apps, NativeScript projects, and any mobile-first web application targeting both iOS and Android users.

Created By

Ben Sperry Visit Website

License

Features & Tags

Precise Shapes Has Padding

Pack Details

Version

8.0.13

v8.0.13

Color Support

Monochrome

Category

UI 16px / 32px

In 1 collection

How to use IonIcons icons

Icon Set Version

v8.0.13

Package

ionicons

License SPDX

MIT

Grid Size

32px

Display Size

16px

Sample Icons

code-download-sharp, contrast-outline, checkmark-done

Install

bash
npm install ionicons

React

tsx
// Via Ionicons web component (CDN): zero-JS fallback
import { Icon } from '@iconify/react';

export default function App() {
  // -outline (iOS), -sharp (geometric), no suffix = solid (Android)
  return <Icon icon="ion:search-outline" width={24} />;
}

HTML / CDN

html
<!-- Ionicons web component via CDN -->
<script type="module" src="https://unpkg.com/ionicons@7/dist/ionicons/ionicons.esm.js"></script>
<ion-icon name="search-outline"></ion-icon>
<!-- suffix: -outline (iOS), -sharp, or no suffix (solid/Android) -->

Via Iconify · any framework

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

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

Package stats

Build-time npm metadata cached weekly • Last refresh Aug 13, 2026

ionicons

Premium icons for Ionic.

v8.1.0
Score 75%
Popularity 67%
Quality 93%
Maintenance 66%

License

MIT

Weekly downloads

760.2K

Monthly downloads

3M

Total downloads

51.8M

Unpacked size

5.9 MB

Last published

Jul 28, 2026

Registry updated

Jul 28, 2026

IonIcons version history

Based on the last 10 releases, IonIcons typically ships a new version every ~1 day. The latest release, v8.1.0, landed on Jul 28, 2026.

Version Released
v8.1.0 Jul 28, 2026
v8.0.13 Jul 8, 2025
v8.0.12 Jul 8, 2025
v8.0.11 Jul 7, 2025
v8.0.10 Jul 2, 2025
v8.0.9 Jun 2, 2025
v8.0.8 May 6, 2025
v8.0.7 May 6, 2025
v8.0.6 May 5, 2025
v8.0.5 May 5, 2025
v8.0.4 May 5, 2025
v8.0.3 May 5, 2025
v8.0.2 May 5, 2025
v8.0.1 May 5, 2025
v8.0.0 May 2, 2025
v7.4.0 May 1, 2024
v7.3.1 Mar 27, 2024
v7.3.0 Mar 20, 2024
v7.2.3 Mar 20, 2024
v7.2.2 Dec 13, 2023

Source: npm registry data for ionicons, refreshed weekly.

Compare IonIcons with similar icon packs

Frequently Asked Questions

Do I need Ionic Framework to use Ionicons?
No. Ionicons work as standalone web components, SVGs, or React/Vue packages, completely independent of the Ionic Framework.
What are the three Ionicons styles?
Outline (open shapes) matches iOS style. Solid (filled) matches Android Material style. Sharp uses right angles for a geometric look. All three are included for every icon.
How do I add Ionicons to a web project?
Add via CDN: <script type="module" src="https://unpkg.com/ionicons@7/dist/ionicons/ionicons.esm.js"></script>, then use <ion-icon name="search-outline"></ion-icon>.
How many icons are in IonIcons?
IonIcons contains 1,357 SVG icons in the UI 16px / 32px category, designed on a 32px grid.
How often is IonIcons updated?
Based on the last 10 releases, IonIcons typically ships a new version every ~1 day. The latest release, v8.1.0, landed on Jul 28, 2026. See the full version history below.