Skip to main content
Mapagam

Working with Icons

1. Using IonIcon Component

Property Values Description
name string Name of the icon from the Ionicons library
size small | medium | large Size of the icon
color primary | secondary | success | warning | danger | light | medium | dark Color of the icon

Example: Basic Usage

<ion-icon name="heart"></ion-icon>

Example: With Size and Color

<ion-icon name="star" size="large" color="warning"></ion-icon>

2. Using Ionicons Library

Property Values Description
name home The icon name to render from the Ionicons library
size medium, small, large Adjusts the size of the icon
color primary, secondary, danger Sets the color of the icon using Ionic's color system

Example: Basic Usage


<ion-icon name="home"></ion-icon>

Example: With Size and Color


<ion-icon name="heart" size="large" color="danger"></ion-icon>
Note: Ionicons are SVG-based and support dynamic styling via CSS.

3. Using Platform-Specific Icons

Example: Using Platform-Specific Icons

<ion-icon name="logo-ionic" platform="ios"></ion-icon>
<ion-icon name="logo-ionic" platform="md"></ion-icon>
Property Values Description
name string Name of the icon to use
platform ios | md | android Platform-specific icon variant to use
Note: Platform-specific icons are supported in Ionic 6+.

4. Setting Icon Size

Property Values Description
size small, medium, large Defines the size of the icon
style solid, outline Defines the style of the icon

Example: Setting Icon Size

<ion-icon name="heart" size="large"></ion-icon>
<ion-icon name="heart" size="medium"></ion-icon>
<ion-icon name="heart" size="small"></ion-icon>

5. Setting Icon Color

Icons in Ionic can be customized with different colors using CSS classes or inline styles.

Property Values Description
color primary, secondary, tertiary, success, warning, danger, light, medium, dark Predefined color variants for Ionic icons
style color: #ff0000; Custom color using inline CSS

Example: Using Predefined Color

<ion-icon name="heart" color="danger"></ion-icon>

Example: Using Custom Color

<ion-icon name="star" style="color: #ffcc00;"></ion-icon>

6. Using Custom SVG Icons

Example: Adding a Custom SVG Icon

<!-- src/icons/my-icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
</svg>
Property Description Usage
icon Name or path to custom SVG icon <ion-icon name="my-icon"></ion-icon>
Note: Custom SVG icons must be added to the src/icons directory and registered in your Ionic project's configuration.

7. Using Icon Slots

Icon slots in Ionic allow you to customize the placement and appearance of icons within components like buttons, cards, and lists. You can use slots to inject custom icons or modify existing ones.

Slot Description Usage Example
start Places the icon at the beginning of the component. 
<ion-item>
  <ion-icon slot="start" name="heart"></ion-icon>
  <ion-label>Favorite</ion-label>
</ion-item>
end Places the icon at the end of the component. 
<ion-item>
  <ion-label>Settings</ion-label>
  <ion-icon slot="end" name="chevron-forward"></ion-icon>
</ion-item>
icon Used to define an icon inside a component like ion-button or ion-card. 
<ion-button>
  <ion-icon slot="icon-only" name="add"></ion-icon>
</ion-button>

Example: Custom Icon in Button

<ion-button>
  <ion-icon slot="start" name="star"></ion-icon>
  <ion-label>Save</ion-label>
</ion-button>
Note: The slot attribute is used to position the icon within the component structure. It must be placed inside the component that supports it.

8. Implementing Icon Buttons

Example: Basic Icon Button

<ion-button>
  <ion-icon name="heart"></ion-icon>
</ion-button>
Property Values Description
icon string Name of the icon to display (from Ionicons library)
size small | medium | large Size of the icon button
color primary | secondary | success | warning | danger | light | dark Color theme for the button
Note: Icon buttons should have accessible labels for screen readers. Use aria-label or aria-labelledby to provide context.

Example: Icon Button with Label

<ion-button aria-label="Add to favorites">
  <ion-icon name="heart-outline"></ion-icon>
  <span>Favorite</span>
</ion-button>

9. Using Lazy Loading Icons

Example: Lazy Load Icon in Ionic

import { IonIcon } from '@ionic/react';
import { home } from 'ionicons/icons';

// Lazy load icon
const MyComponent = () => {
  return <IonIcon icon={home} lazy={true} />;
};
Property Values Description
icon string | IonIcon The icon name or IonIcon object to display
lazy true | false Enables lazy loading of the icon
Note: Lazy loading icons improves initial load performance by deferring icon rendering until needed.

10. Creating Icon Libraries

Example: Icon Library Structure

// Example directory structure for an icon library
// src/icons/
//   ├── index.js
//   ├── icon-set.js
//   ├── icons/
//   │   ├── home.svg
//   │   ├── user.svg
//   │   └── settings.svg
//   └── styles.css
Feature Description Usage
iconSetName ionicons Name of the icon set to use
iconPath ./src/icons Directory where icons are stored
iconFormat svg File format of the icons (e.g., svg, png)
Note: Ensure all SVG icons are optimized for web use to reduce bundle size.

Example: Registering an Icon Set

import { Ionicons } from 'ionicons';
import { addIcons } from 'ionicons/components';

// Register custom icon set
addIcons({
  home: require('./icons/home.svg'),
  user: require('./icons/user.svg'),
  settings: require('./icons/settings.svg')
});

// Use in component
<ion-icon name="home"></ion-icon>

Comparison: Built-in vs Custom Icons

  • Built-in: Predefined set from Ionicons library
  • Custom: User-defined SVGs or external icon sets

Was this article helpful?

Related Cheat Sheets