How to use Dashicons in your WordPress Theme or Plugin

Dashicons is the official icon font of the WordPress admin as of 3.8. The icon font is licensed under GPLv2.

Dashicons are already included in the WordPress admin. It’s easy to add them to your Plugin or Theme: all you need to do is add HTML. If you need, you can add custom CSS to style the icon font.

If you want to add Dashicons in WordPress frontend, you will need to enqueue them using PHP code in your theme functions.php file:

/* Add Dashicons in WordPress Front-end */
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}

Note: please don’t edit the functions.php file of your theme. You can lose all modifications if the theme is updated. Use a Child Theme.

Dashicons in WordPress frontend: HTML Usage

To add Dashicons go to the official Dashicons Homepage and click the icon you want to use. Then click the “Copy HTML” link at the top of the page and copy the HTML code for the icon you want to use.

dashicons wordpress

Paste the HTML into your editor or text widget. For example:

<span class="dashicons dashicons-admin-users"></span>

Dashicons: CSS Usage

You can add the icons using the dashicons-before class.
In this example, we add Dashicons to a <h2> heading:

<h2 class="dashicons-before dashicons-info">A Headline width Dashicons</h2>

Then you can style your icon’s class:

.heading-icon:before {
font-size: 20px;
line-height: 1;
vertical-align: top;
}