WordPress Icons: What They Are & How to Add Them to Your Site

Get HubSpot's WordPress Plugin
Anna Fitzgerald
Anna Fitzgerald


There are plenty of ways you can make a positive impact on your WordPress website’s user experience. One of our favorite strategies? By making use of WordPress icons. Whether you’re new to the WordPress platform or a seasoned pro that wants a refresher on the WordPress blog icons to know, you are in the right place. 

WordPress icons: image shows a computer and a computer key

Grow Your Business With HubSpot's Tools for WordPress Websites

In this post, we’ll walk through what WordPress blog icons are, how you can add WordPress icons with the help of a plugin, and even how you can use a WordPress icons font. Ready to start improving your WordPress site’s user experience? Let’s go! 

What are WordPress icons?

WordPress blog icons function the same as traditional web icons. The intent of using them is also the same: They draw attention to can’t-miss portions of a web page, indicate information while taking up fewer characters than text, and reinforce your brand. 

To get an idea of what using WordPress icons could look like on your website, let’s take a look at a site that uses them. Quartz is just one example of a WordPress website that uses icons on its mobile site to help readers navigate the site. Thanks to universally understood, easy-to-digest icons, visitors know where to click to find a specific article, how to sign in, or how to reach other portions of the website. Icons are also an important add if you have a multilingual site or an international audience. That’s the power of icons.

wordpress icons: Quartz website uses WordPress icons in header and footer

Image Source

Now that you know what icons are and how they can be used to improve UX, let’s walk through how to add them to your WordPress site.

Let’s walk through both these processes below.

Adding WordPress Icons Using a Plugin

If you’re just getting started with WordPress icons, using a plugin is probably the best way to begin. For the sake of this demo, we’ll walk you through how to add icons to your WordPress site using the Font Awesome plugin. It’s updated frequently and boasts more than 400,000 installations —  so you know it’s a good WordPress plugin.

To get WordPress icons on your site using Font Awesome, here’s what to do: 

1. Install and activate the plugin.

To begin, you’ll log in to your WordPress dashboard and install and activate the Font Awesome plugin.

wordpress icons: Installing Font Awesome plugin to add icons to WordPress

2. Configure the plugin settings as needed.

Once you install and activate the plugin, you’ll be automatically redirected to the Installed Plugins page. Below Font Awesome, click Settings.

wordpress icons: Click Font Awesome plugin settings before adding icons to WordPress site

By default, the plugin will be set up to use the free web icons via the Font Awesome CDN. If you’re happy with these settings, then you don’t have to make any changes.

wordpress icons: Font Awesome plugin default settings

However, if you want to use free and pro icons on your site, you’ll need to set up a Font Awesome Kit, get an API token, and add it to your plugin settings page. (If you’re a beginner and just want simple icons, don’t worry about this. However, if you want more advanced icons, this is a good option.) Once you complete this, click Save Changes.

3. Copy and paste a shortcode or HTML snippet where you want the icon to appear.

The shortcode for a Font Awesome Icon looks like this:

[icon name="value"]

Make sure to replace the placeholder text “value” with the actual name of the icon you want to add to your site. For example, if you want to add an award icon, then you’d use the shortcode:

[icon name="award"]

If you’re more comfortable with HTML than shortcodes, don’t panic! You can also add icons using the standard Font Awesome syntax. The best part is that the HTML snippet is provided for each icon in the Font Awesome library, so you simply have to copy and paste it. Here’s the HTML snippet for the award icon:

wordpress icons: HTML snippet for award icon in Font Awesome Library

Image Source

4. Preview the post or page.

Don’t push your post live until you’re sure your icon is set up correctly! To ensure you added the icon successfully, preview the post or page. It should look something like this:

wordpress icons: WordPress homepage features award icon from Font Awesome library

If the icon doesn’t appear, make sure that you tried to add a free icon, not a premium one.

Adding Icons to WordPress Using Dashicons

The Font Awesome plugin isn’t the only way you can add WordPress icons to your site. The WordPress icons font is called Dashicons, and these icons are used in the WordPress dashboard and block editor. For example, here are the icons used to represent the different post formats in WordPress:

WordPress icons: dashicons representing post formats

Image Source

You can use these on the front end of your website, but you’ll need to enqueue it. This will require editing your functions.php file, which makes this method better suited for advanced users.

Below we’ll edit the functions.php file directly. However, any error when editing this file can break your site. Plus, any custom code added will be erased the next time you update your theme. So it’s recommended that you use a plugin like Code Snippets instead. 

1. Open your theme file editor.

Log in to your WordPress dashboard and click Appearance > Theme File Editor.

wordpress icons: Clicking theme file editor in WordPress dashboard

2. Add a code snippet to your functions.php file.

By default, the theme file editor will open your stylesheet. Click the Theme Functions, or functions.php, file.

WordPress icons: second step

Scroll to the bottom of the file and copy and paste the following code snippet:

function my_theme_styles() {
wp_enqueue_style( 'dashicons' );

Click Update File.

WordPress icons: update file

3. Copy and paste the HTML for an icon in the Dashicons library.

Once the file has been updated, you can visit the Dashicons library. Click on the icon you want to add to your site and then click Copy HTML. 

wordpress icons: Copy HTML for WordPress icon from dashicons library

4. Copy and paste the HTML snippet where you want the icon to appear.

Now go to the post or page where you want to add the icon. Add a custom HTML block and paste the HTML snippet.

wordpress icons: Adding HTML snippet for WordPress dashicon in Gutenberg editor

5. Preview the post or page. 

To ensure you added the icon correctly, preview the post or page. It should look something like this:

WordPress icons: homepage with WordPress dashicon

Adding Icons to Your WordPress Website

You can use WordPress icons or create your own custom icons to improve the appearance, navigability, and overall user experience of your website. You can easily add them to your site with or without a plugin, depending on your level of technical expertise. 

Editor's note: This post was originally published in October 2019 and has been updated for comprehensiveness.

Use HubSpot tools on your WordPress website and connect the two platforms  without dealing with code. Click here to learn more.


Related Articles

Capture, organize, and engage web visitors with free forms, live chat, CRM, analytics, and more.


CMS Hub is flexible for marketers, powerful for developers, and gives customers a personalized, secure experience