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.
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
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.
Raw vector markup. Paste directly into HTML or React components. Scales to any size without quality loss.
React-ready component. Drop into any React or Next.js project. Works with shadcn/ui, Radix, and Tailwind CSS.
Raster export at 1×, 2× and 3× for email templates, Figma imports, app assets, and Open Graph images.
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
License
Features & Tags
Pack Details
Version
8.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
npm install ionicons React
// 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
<!-- 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
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.
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?
What are the three Ionicons styles?
How do I add Ionicons to a web project?
<script type="module" src="https://unpkg.com/ionicons@7/dist/ionicons/ionicons.esm.js"></script>, then use <ion-icon name="search-outline"></ion-icon>.