iwantcoding.com
🔥 Daily 👥 Rooms 🏆 Top Log in Sign up

Ionicons

By · Reviewed & last updated · Part of Ionic Tutorial

ion-icon renders SVG icons from Ionicons (5000+) or your custom SVGs. Specify name for stock; src for custom. Per-mode (iOS / md) names auto-switch.

Stock, custom, slots, animations

EXAMPLE
<!-- 1) Stock icons — name -->
<ion-icon name="home"></ion-icon>
<ion-icon name="settings"></ion-icon>
<ion-icon name="heart-outline"></ion-icon>
<ion-icon name="heart" color="danger"></ion-icon>
<ion-icon name="checkmark-circle" color="success"></ion-icon>

<!-- Sizes -->
<ion-icon name="home" size="small"></ion-icon>     <!-- 18px -->
<ion-icon name="home"></ion-icon>                  <!-- 24px default -->
<ion-icon name="home" size="large"></ion-icon>     <!-- 32px -->
<ion-icon name="home" style="font-size: 64px"></ion-icon>

<!-- Outline / filled / sharp variants -->
<ion-icon name="home-outline"></ion-icon>
<ion-icon name="home"></ion-icon>             <!-- filled -->
<ion-icon name="home-sharp"></ion-icon>

<!-- 2) Platform-specific (iOS vs Material) -->
<ion-icon ios="heart-outline" md="heart"></ion-icon>
<!-- ios is auto on Safari, md on Android Chrome — pass both to control each -->

<!-- 3) Inside Ionic components — slot positioning -->
<ion-button>
    <ion-icon slot="start" name="save"></ion-icon>
    Save
</ion-button>

<ion-button>
    Next
    <ion-icon slot="end" name="arrow-forward"></ion-icon>
</ion-button>

<ion-button fill="clear" aria-label="Close">
    <ion-icon slot="icon-only" name="close"></ion-icon>
</ion-button>

<!-- ion-list / ion-item -->
<ion-item>
    <ion-icon slot="start" name="person"></ion-icon>
    <ion-label>Profile</ion-label>
    <ion-icon slot="end" name="chevron-forward"></ion-icon>
</ion-item>

<!-- 4) Custom SVG via src -->
<ion-icon src="/assets/svg/logo.svg"></ion-icon>
<ion-icon src="https://cdn.example.com/icons/check.svg"></ion-icon>

<!-- 5) Register icons explicitly for tree-shaking + faster cold start (Angular / React) -->
// main.ts (Angular)
import { addIcons } from 'ionicons';
import { home, settings, heart, heartOutline, checkmarkCircle, close, chevronForward } from 'ionicons/icons';

addIcons({
    'home':              home,
    'settings':          settings,
    'heart':             heart,
    'heart-outline':     heartOutline,
    'checkmark-circle':  checkmarkCircle,
    'close':             close,
    'chevron-forward':   chevronForward,
});
// Now <ion-icon name="home"></ion-icon> uses the bundled icon — no network fetch.

<!-- 6) Color -->
<!-- color attribute uses theme colors (primary, secondary, success, warning, danger, dark, medium, light) -->
<ion-icon name="flame" color="danger"></ion-icon>
<ion-icon name="checkmark" color="success"></ion-icon>

<!-- Or CSS for arbitrary colors -->
<ion-icon name="star" style="color: gold"></ion-icon>

<!-- 7) Animation -->
<ion-icon name="refresh" class="spinning"></ion-icon>

<style>
.spinning { animation: spin 1.2s linear infinite; }
@@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>

<!-- 8) Tab bar -->
<ion-tab-bar slot="bottom">
    <ion-tab-button tab="feed" href="/feed">
        <ion-icon name="home"></ion-icon>
        <ion-label>Feed</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="search" href="/search">
        <ion-icon name="search"></ion-icon>
        <ion-label>Search</ion-label>
    </ion-tab-button>
    <ion-tab-button tab="profile" href="/profile">
        <ion-icon name="person"></ion-icon>
        <ion-label>Me</ion-label>
    </ion-tab-button>
</ion-tab-bar>

<!-- 9) Browse icons -->
<!-- https://ionic.io/ionicons -->
<!-- 5000+ icons, three styles each (outline, filled, sharp) -->

<!-- 10) Accessibility -->
<!-- aria-label for icon-only buttons -->
<ion-button fill="clear" aria-label="Delete item">
    <ion-icon slot="icon-only" name="trash"></ion-icon>
</ion-button>

<!-- aria-hidden when the icon is decorative (label already gives context) -->
<ion-button>
    <ion-icon slot="start" name="save" aria-hidden="true"></ion-icon>
    Save
</ion-button>

<!-- 11) Custom icons (your brand) -->
<!-- Drop in /src/assets/icons/brand-logo.svg -->
<ion-icon src="assets/icons/brand-logo.svg" style="font-size: 32px"></ion-icon>

<!-- Or register as a custom name -->
// ts
import brandLogo from './assets/icons/brand-logo.svg';
addIcons({ 'brand-logo': brandLogo });

// template
<ion-icon name="brand-logo"></ion-icon>

<!-- 12) Bundle vs CDN -->
<!-- By default, ion-icon lazy-loads from a CDN. For offline / strict CSP, register icons explicitly -->
<!-- (step 5) and ship them in your bundle. -->

<!-- 13) When to use Ionicons vs other libs -->
<!--   Ionicons      : default, integrates with ion-* components -->
<!--   Material Icons / SF Symbols : platform-native feel -->
<!--   Lucide / Heroicons          : cleaner outline style; bundle as SVG components -->
<!--   Custom brand                : your own SVG, registered via addIcons -->

Why it matters

Register every used icon via addIcons instead of relying on the CDN auto-fetch — faster cold starts, works offline, and CSP-compliant.

Tip: Tweak the snippet with Try it Yourself », then sit the quiz at the bottom of the page.

Example

Example
// Angular / Vue
<ion-icon name="heart"></ion-icon>
// React
import { heart } from 'ionicons/icons';
<IonIcon icon={heart} />
Try it Yourself »

Discussion

Loading…