# How to install and use Ionicons in WordPress

> Ionicons is a lightweight icon library from the Ionic team. Here's how to enqueue it in WordPress and use the icons in your theme without any plugin.

Published: 2019-10-20T06:16:26.000Z
Updated: 2026-04-24T10:00:00.000Z
Author: Shameem Reza
Category: WordPress
Canonical: https://shameemreza.com/how-to-install-and-use-ionicons-in-wordpress/

---

import Tldr from '../../components/Tldr.astro';

[Ionicons](https://ionicons.com/) is a free icon library from the Ionic team that ships both SVG and web font versions. It's lighter than Font Awesome and has a crisper look out of the box. If you're using it on a WordPress site, you don't need a plugin, you just need to enqueue the stylesheet properly.

<Tldr>
  Hook `wp_enqueue_scripts` in your child theme's `functions.php` and load the Ionicons stylesheet from the CDN. Once it's registered, you can drop any icon into a post or template with `<ion-icon name="flashlight-outline"></ion-icon>` (v5+) or `<i class="icon ion-md-flashlight"></i>` (v4 and older). Before you install it, check whether your theme already ships Dashicons or Font Awesome, so you're not loading two icon libraries at once.
</Tldr>

## Check what your theme already loads

Before you add anything new, search your theme for `dashicons`, `font-awesome`, or `ionicons` in `functions.php` and the enqueue calls. Running two icon libraries on the same page is a performance hit for no reason. Pick one and stick with it.

Dashicons is the one WordPress ships with by default, and it's the lightest option if you only need a handful of generic icons. If Dashicons doesn't have what you need, that's when a library like Ionicons starts to pay for itself.

## Enqueue Ionicons in your theme

Add this to your child theme's `functions.php` or to a custom plugin:

```php
add_action( 'wp_enqueue_scripts', 'shameem_enqueue_ionicons' );
function shameem_enqueue_ionicons() {
    wp_enqueue_style(
        'ionicons',
        'https://unpkg.com/ionicons@7.1.0/dist/collection/components/icon/icon.min.css',
        array(),
        '7.1.0'
    );
}
```

Pin the version number explicitly. If you let it track `latest`, a breaking change in the library will silently break your icons on every page that uses them.

## Use the icons in posts and templates

On [ionicons.com](https://ionicons.com/), pick an icon and copy the usage snippet. For v5 and newer, that's the `<ion-icon>` web component:

```html
<ion-icon name="flashlight-outline"></ion-icon>
```

For older v4 code, it's a plain `<i>` tag with a class name:

```html
<i class="icon ion-md-flashlight"></i>
```

Drop either form directly into a post, a block, or a template file, and the icon renders in place.

## Other options in the same category

Ionicons isn't the only option. [Font Awesome](https://fontawesome.com/), [IcoFont](https://icofont.com/), [Fontello](http://fontello.com/), and [IcoMoon](https://icomoon.io/) all work the same way. Enqueue the stylesheet, then use the class name or element in your content. Pick the one whose icon set actually matches what you're building, not the one with the biggest library.