WP Dashicons: How to Use WordPress Admin Icons in Themes and Plugins

Use WP Dashicons when you need simple WordPress-style icons in an admin menu, plugin screen, theme option panel, or even on the front end. They are already bundled with WordPress, so you do not need another icon library for basic UI work.

What are WP Dashicons?

Dashicons are the official icon font used inside the WordPress admin area. You have seen them before. The gear icon. The posts icon. The comments bubble. The tiny home. The calendar. All those neat little symbols are part of the Dashicons set.

They help your plugin or theme feel like it belongs in WordPress. No weird mismatch. No giant image files. No hunting through random icon packs at 1:12 a.m. while your coffee gets cold.

Honestly, it feels silly to install a full icon library just to show one tiny wrench beside a settings page. Dashicons fix that.

Where can you use Dashicons?

You can use Dashicons in many WordPress spots.

• Admin menu items for plugins.
• Custom post types in the WordPress sidebar.
• Theme option pages.
• Dashboard widgets.
• Front end buttons, if you enqueue the style.
• Shortcodes and small UI labels.

They are most useful in the admin area. That is where they look the most natural. On the front end, use them only when the style fits your design.

How to find Dashicon names

WordPress has a Dashicons resource page in the developer docs. Each icon has a name like dashicons-admin-home or dashicons-format-image.

The name matters. One wrong letter and the icon vanishes. It drives me crazy that a missing s can waste 45 seconds for no good reason. So copy the class name directly when you can.

Common examples include:

• dashicons-admin-generic for a gear.
• dashicons-admin-tools for tools.
• dashicons-cart for a cart.
• dashicons-email for mail.
• dashicons-chart-bar for reports.
• dashicons-calendar-alt for dates.

Using Dashicons in a plugin admin menu

This is one of the easiest wins. When you create an admin page with add_menu_page(), WordPress lets you pass an icon name.

<?php
add_action('admin_menu', 'my_cool_plugin_menu');

function my_cool_plugin_menu() {
    add_menu_page(
        'Cool Plugin Settings',
        'Cool Plugin',
        'manage_options',
        'cool-plugin',
        'my_cool_plugin_page',
        'dashicons-admin-tools',
        25
    );
}

function my_cool_plugin_page() {
    echo '<div class="wrap">';
    echo '<h1>Cool Plugin Settings</h1>';
    echo '<p>Hello from your plugin page.</p>';
    echo '</div>';
}
?>

The sixth value is the icon. In this case, it is dashicons-admin-tools. That gives your menu item a tools icon.

Simple. Clean. Very WordPress.

Using Dashicons with custom post types

Dashicons are also great for custom post types. You can set the menu_icon value when you register the post type.

<?php
function register_movie_post_type() {
    register_post_type('movie', array(
        'labels' => array(
            'name' => 'Movies',
            'singular_name' => 'Movie'
        ),
        'public' => true,
        'menu_icon' => 'dashicons-video-alt2',
        'supports' => array('title', 'editor', 'thumbnail')
    ));
}
add_action('init', 'register_movie_post_type');
?>

Now your “Movies” item gets a video icon. Your client can spot it faster. Your admin menu feels less like a wall of gray text.

Using Dashicons in HTML

You can also place a Dashicon inside your markup. Use a span tag with two classes. The first class is dashicons. The second is the icon name.

<span class="dashicons dashicons-smiley"></span>

That creates a smiley icon. Cute. Maybe too cute. Use with care.

Here is a button example:

<a class="button" href="#">
    <span class="dashicons dashicons-download" aria-hidden="true"></span>
    Download Report
</a>

The aria-hidden="true" part tells screen readers to ignore the icon. The text says “Download Report,” so the icon does not need to be read aloud.

Loading Dashicons on the front end

Inside the WordPress admin, Dashicons are usually ready to go. On the front end, you need to load the stylesheet yourself.

<?php
function my_theme_load_dashicons() {
    wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'my_theme_load_dashicons');
?>

Add this to your theme’s functions.php file or your plugin file. After that, your front end can show Dashicons.

Do not load them everywhere for one tiny icon unless you really need to. It is still an extra font file. Small, yes. Magic, no.

Adding Dashicons with CSS

You can also add icons with CSS pseudo-elements. This is handy for labels, notices, or custom links.

.my-help-link:before {
    content: "\f223";
    font-family: dashicons;
    font-size: 18px;
    vertical-align: middle;
    margin-right: 6px;
}

The tricky part is the code. Each Dashicon has a Unicode value, like \f223. You can find it in the Dashicons reference.

This method is tidy when you want icons added by styling alone. Still, class names are easier for most people.

Styling Dashicons

Dashicons behave like text. That means you can style them with normal CSS.

.my-icon {
    color: #2271b1;
    font-size: 24px;
    width: 24px;
    height: 24px;
}

You can change:

• Color with color.
• Size with font-size.
• Spacing with margin.
• Alignment with vertical-align.

Just remember that some icons look fuzzy if they get too large. They were made for admin UI sizes. Think 16 to 32 pixels. Not giant hero banners.

Best practices for using Dashicons

Dashicons are simple, but a few habits will save pain.

• Use them for meaning. A cart icon should mean shopping, not settings.
• Pair icons with text. Icons alone can confuse users.
• Keep sizes consistent. Random icon sizes look messy fast.
• Hide decorative icons from screen readers. Use aria-hidden="true".
• Do not overload the front end. If your site already uses another icon system, skip Dashicons there.

Dashicons vs SVG icons

Dashicons are easy. SVG icons are sharper and more flexible. So which should you use?

Use Dashicons when you are building WordPress admin screens, plugin menus, or quick tools. They are fast to add and familiar to users.

Use SVG icons when you need custom branding, perfect scaling, or unique artwork. SVGs are better for polished front end design.

A good rule is simple. Admin area: Dashicons. Public website design: maybe SVG.

Common mistakes

Here are the little bugs that eat time.

• Forgetting to enqueue Dashicons on the front end.
• Using only dashicons-admin-home without the base dashicons class in HTML.
• Typing the icon name wrong.
• Using giant icon sizes that look rough.
• Using icons without labels.

The most common fix is boring but useful. Check the class name. Then check if the stylesheet is loaded. That solves most missing icon problems.

A quick real-world example

Say you build a booking plugin for a dentist. It has three admin pages: Appointments, Patients, and Reports. You use dashicons-calendar-alt, dashicons-groups, and dashicons-chart-line.

Now the receptionist can spot the right page faster. If she opens the admin 40 times per day and saves only 2 seconds each time, that is 80 seconds saved daily. Tiny win. But tiny wins add up.

Final tip

Start with Dashicons when your work lives inside WordPress admin. They are quick, free, built in, and easy to read. Use them with clear labels. Keep them small. Your plugin will feel more native, and your users will not need to guess what each menu item does.