How to install and use Ionicons in WordPress

Ionicons 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.

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:

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, pick an icon and copy the usage snippet. For v5 and newer, that’s the <ion-icon> web component:

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

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

<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, IcoFont, Fontello, and IcoMoon 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.