Dashicons WordPress: How to Use the Built-In Icon Library in Themes and Plugins

Facebook Tweet Pin LinkedIn

Use Dashicons when you need familiar WordPress admin icons without loading another icon font or image set. They are built into WordPress, work well in themes and plugins, and are best suited for admin screens, menu items, settings pages, and simple interface cues.

TLDR: Dashicons are WordPress’s built-in icon font, so plugin and theme developers can add icons with a small class name such as dashicons-admin-tools. A plugin with three admin pages can use Dashicons for each menu item and avoid adding a separate 30 KB to 100 KB icon library. In one common use case, a settings plugin can make its admin screen easier to scan by using icons for “General,” “Security,” and “Tools,” reducing visual confusion for support users. Use them mainly in the admin area, and load them on the front end only when you truly need them.

What Dashicons Are

Dashicons are the official icon font included with WordPress. They were created for the WordPress admin interface and are still widely used in plugins, custom post types, admin menus, and dashboard widgets.

Each icon is called with a CSS class. For example, dashicons-admin-post shows the post icon, while dashicons-products shows a product-style icon. You do not need to upload SVG files or install a third-party package for standard admin icons.

That simplicity is the main benefit. Honestly, it feels like overkill to load a full icon framework just to show four admin menu icons. Dashicons solve that small but common problem cleanly.

Image not found in postmeta

When You Should Use Dashicons

Dashicons work best in places where users already expect WordPress styling. Good use cases include:

Custom post type menu icons, such as books, products, events, or testimonials.
Plugin admin menu pages, including settings, reports, tools, and import screens.
Dashboard widgets that need small visual markers.
Theme option panels inside the WordPress admin area.
Inline status messages, such as success, warning, lock, and visibility icons.

They are less suitable for large front-end design systems. Dashicons have a WordPress admin look. That is useful in the dashboard, but it can feel out of place in a highly branded public website.

How to Find the Right Dashicon

The safest source is the official WordPress Dashicons resource. It shows every available icon and its class name. Pick the icon, copy the class, and use it in your code.

A Dashicon class usually looks like this:

dashicons dashicons-admin-settings

The first class, dashicons, loads the base icon styling. The second class chooses the specific icon. If either part is missing, the icon may not appear as expected.

Expect to waste time on tiny typos if you copy class names by hand. A missing “s” in dashicons can cost five minutes for no good reason. Copy directly when possible.

Using Dashicons in Plugin Admin Menus

For plugins, one of the most common uses is the icon shown beside a custom admin menu item. WordPress lets you pass a Dashicon class into add_menu_page().

add_menu_page(
    'Plugin Settings',
    'My Plugin',
    'manage_options',
    'my-plugin-settings',
    'my_plugin_settings_page',
    'dashicons-admin-generic',
    80
);

In this example, dashicons-admin-generic displays a settings-style icon in the admin sidebar. This is much cleaner than bundling a custom image for a basic settings page.

If your plugin has a clear purpose, choose an icon that matches it. Use dashicons-chart-bar for reports, dashicons-shield for security, dashicons-cart for commerce, and dashicons-upload for import tools.

Using Dashicons for Custom Post Types

Dashicons are also useful with register_post_type(). The menu_icon argument accepts a Dashicon class.

register_post_type('book', array(
    'labels' => array(
        'name' => 'Books',
        'singular_name' => 'Book'
    ),
    'public' => true,
    'show_in_menu' => true,
    'menu_icon' => 'dashicons-book',
    'supports' => array('title', 'editor', 'thumbnail')
));

This gives the “Books” admin menu item a book icon. It helps editors spot the content type faster, especially on sites with many plugins installed.

Using Dashicons in Admin HTML

You can place Dashicons directly inside admin page markup. Use a span element with the right classes.

<span class="dashicons dashicons-yes"></span>
<strong>Settings saved successfully.</strong>

This can make admin notices, tabs, and section headings easier to scan. Keep it restrained. Too many icons make a settings page look noisy and less credible.

For accessibility, do not rely on an icon alone to communicate meaning. Pair it with text, or add screen reader text when needed.

<span class="dashicons dashicons-warning" aria-hidden="true"></span>
<span class="screen-reader-text">Warning:</span>
Check your API key.

The icon supports the message. The text carries the meaning. That is the safer pattern.

Loading Dashicons on the Front End

Dashicons are already available in the WordPress admin area. On the public front end, they are not always loaded for logged-out visitors. If you need them there, enqueue the style properly.

function mytheme_load_dashicons() {
    wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'mytheme_load_dashicons');

Use this only when the front end truly needs Dashicons. Loading extra CSS for one decorative icon is not a great trade. If your theme already uses SVG icons, it may be better to stay with that system.

There is also a performance concern. The Dashicons stylesheet and font are not huge, but every extra asset can affect page speed. On a small brochure site, that may not matter. On a high-traffic store, small savings add up.

Styling Dashicons with CSS

Dashicons inherit many text-related CSS properties. You can change their size, color, spacing, and alignment.

.my-plugin-heading .dashicons {
    color: #2271b1;
    font-size: 24px;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 6px;
}

The default size is often close to 20 pixels. If the icon looks clipped after resizing, set the width and height to match the font-size. This fixes many odd alignment problems.

Avoid using icons as a replacement for proper labels. A gear icon can mean settings, tools, repair, or configuration. Text removes doubt.

Best Practices for Reliable Use

Use Dashicons mainly in the admin area. That is where they fit best.
Choose obvious icons. A vague icon slows users down.
Do not overload the interface. One icon per key action is usually enough.
Keep accessibility in mind. Add text labels or screen reader text.
Enqueue Dashicons correctly. Do not hardcode paths to WordPress core files.
Check icon availability. Older WordPress versions may not include newer icons.

Common Mistakes

The most common mistake is assuming Dashicons are always available on the front end. They are not. If the icon appears while logged in but disappears in a private browser window, missing front-end enqueueing is often the reason.

Another common mistake is using Dashicons for branding. They are generic interface icons, not a substitute for a logo or product identity. A plugin logo should usually be SVG or another purpose-made asset.

Developers also sometimes use icons without text in toolbar buttons. That can confuse users and screen readers. If an action matters, label it clearly.

Practical Recommendation

Use Dashicons for WordPress admin features where speed, consistency, and low maintenance matter. They are dependable, familiar to WordPress users, and simple to implement. For public-facing design, be more selective and load them only when the benefit is clear.

The best rule is simple: if the icon supports a WordPress admin task, Dashicons are usually a solid choice. If the icon is part of the site’s public visual identity, use a custom SVG or your theme’s main icon system instead.

Facebook Tweet Pin LinkedIn