IonIcons

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

npm install ionicons

// 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} />;
}

<!-- 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) -->

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

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

Compare IonIcons with similar icon packs