Toggle menu
IonIconsIcons
All Ionicons in one searchable grid: Outline, Solid, and Sharp variants. Copy SVG or JSX, download PNG. MIT licensed, by the Ionic Framework team.
Most popular IonIcons icons
What visitors download and copy most from this pack, last 30 days
- 1
call
- 2
water-outline
- 3
home
- 4
people
- 5
card-outline
- 6
people-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, installioniconsand 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.
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 ioniconsReact
// 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 Oct 18, 2026
ionicons
Premium icons for Ionic.
License
MIT
Weekly downloads
963.6K
Monthly downloads
3.4M
Total downloads
44.5M
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>.