Dashicons: How to Use WordPress Icons in Themes, Plugins, and Custom Admin Interfaces

Dashicons should be used for WordPress admin icons first, and front end decoration only when the project truly benefits from WordPress-native styling. They are built into WordPress, easy to call in menus, and handy for custom plugin screens. They are not the best pick for every modern interface, but they remain a fast option for admin UI work.

TLDR: Dashicons are the built-in WordPress icon font used across the admin area. A plugin can add a menu icon with a value like dashicons-admin-tools, while a theme can show an icon with <span class="dashicons dashicons-heart"></span>. In a small plugin admin screen with 8 settings rows, replacing text labels with Dashicons can cut visual scanning time by roughly 20% to 30% for repeat users. The main rule is simple: use them in admin pages freely, but enqueue them manually for front end use.

What Dashicons Are

Dashicons are the official icon font bundled with WordPress. They power many familiar admin icons, including posts, pages, media, comments, tools, settings, and dashboard items. Because the font ships with WordPress, plugin and theme authors do not need to package a separate icon library for basic admin symbols.

The catch is that Dashicons feel a little dated beside newer SVG icon systems. Some icons look chunky on high-density screens. Still, they are simple, stable, and already available inside the admin area. That makes them useful for plugin menus, settings pages, meta boxes, notices, and small interface hints.

Common Places Where Dashicons Fit

• Admin menu items: custom plugin or theme options pages.
• Settings screens: labels, section headers, warnings, and status indicators.
• Dashboard widgets: small visual cues for reports or quick links.
• Custom post type menus: icons that help separate content types.
• Front end snippets: decorative icons, but only after the Dashicons stylesheet is loaded.

Dashicons work best when they support meaning. A gear for settings makes sense. A chart icon for reports makes sense. Random stars beside every heading just add clutter. It gets annoying when an admin screen gains 15 icons and none of them help the user finish a task faster.

Using Dashicons in Admin Menu Pages

WordPress makes Dashicons especially easy in add_menu_page(). The seventh argument accepts a Dashicon class name. For example:

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

function example_register_admin_page() {
    add_menu_page(
        'Reports',
        'Reports',
        'manage_options',
        'example-reports',
        'example_render_reports_page',
        'dashicons-chart-bar',
        26
    );
}
?>

In this case, dashicons-chart-bar appears beside the new “Reports” menu item. The icon class comes from the WordPress Dashicons library. A developer can choose another class, such as dashicons-admin-settings, dashicons-products, dashicons-email, or dashicons-calendar-alt.

Using Dashicons in HTML

Inside the WordPress admin area, a Dashicon can be printed with a simple span element:

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

This method works well for notices, labels, small action links, and custom admin boxes. The first class, dashicons, applies the font and base styling. The second class picks the icon.

For accessibility, the icon should not replace real text unless it has a text alternative. If the icon is decorative, screen readers should ignore it:

<span class="dashicons dashicons-info" aria-hidden="true"></span>
<span>License status</span>

If the icon carries meaning by itself, a hidden label or an aria-label should be added. Text remains the safer choice for critical actions.

Using Dashicons on the Front End

Dashicons are loaded by default in many admin contexts, but not always on the public side of a site. A theme or plugin must enqueue the stylesheet before using Dashicons on the front end.

<?php
add_action( 'wp_enqueue_scripts', 'example_load_dashicons' );

function example_load_dashicons() {
    wp_enqueue_style( 'dashicons' );
}
?>

After that, the markup can use the same class pattern:

<a class="contact-link" href="/contact/">
    <span class="dashicons dashicons-email" aria-hidden="true"></span>
    Contact
</a>

Front end use should be limited. Loading an icon font for one small icon may be wasteful. If a site already uses SVG icons or a block theme icon system, adding Dashicons can create extra weight for little gain.

Styling Dashicons with CSS

Dashicons behave like text. That means size, color, spacing, and alignment can be changed with CSS:

.example-status .dashicons {
    color: #2271b1;
    font-size: 22px;
    width: 22px;
    height: 22px;
    vertical-align: middle;
    margin-right: 6px;
}

The icon’s default dimensions are often 20px by 20px. If the font size changes, the width and height may also need to change. Otherwise, the icon can clip or sit slightly off-center. That tiny alignment bug can burn five minutes for no good reason.

Using Dashicons with CSS Pseudo Elements

Dashicons can also be inserted with CSS through ::before. This pattern is useful when markup should stay clean:

.example-warning::before {
    content: "\f534";
    font-family: dashicons;
    font-size: 20px;
    color: #d63638;
    margin-right: 6px;
    vertical-align: middle;
}

The tricky part is the content code. Each Dashicon has a glyph code, such as \f534. A developer must copy the correct value from the official Dashicons reference. Class names are usually easier and less fragile, so pseudo elements should be used only when they make the markup cleaner.

Adding Icons to Custom Post Types

Custom post types can use Dashicons in the menu_icon argument. This helps editors spot content types quickly in the admin sidebar.

<?php
register_post_type( 'book', array(
    'labels' => array(
        'name' => 'Books',
        'singular_name' => 'Book',
    ),
    'public' => true,
    'show_ui' => true,
    'menu_icon' => 'dashicons-book',
) );
?>

A publishing site with posts, reviews, books, and events can feel crowded in the admin menu. Icons help, as long as each one is distinct. Reusing the same icon for three content types defeats the purpose.

Good Practices for Dashicons

• Use familiar meanings. A calendar should mean dates, bookings, or events.
• Keep text labels. Icons alone can confuse new users.
• Limit front end loading. One icon may not justify an extra font request.
• Check contrast. Pale gray icons can fail accessibility checks.
• Test alignment. Icons can shift when font size changes.
• Avoid decoration overload. Too many symbols make screens noisy.

When Dashicons Are Not the Best Choice

Dashicons are practical, but they are not perfect. Their style belongs to the classic WordPress admin. For highly branded dashboards, SVG icons often look sharper and offer better control. SVGs can be colored, animated, optimized, and loaded one by one.

Still, Dashicons remain a sensible choice for WordPress admin work. They reduce setup time. They match core screens. They also keep small plugins from shipping extra assets for standard UI symbols.

FAQ

Are Dashicons still included in WordPress?

Yes. Dashicons are still bundled with WordPress and are available in the admin area.

Do Dashicons load automatically on the front end?

No, not reliably. A theme or plugin should call wp_enqueue_style( 'dashicons' ) before using them on public pages.

Can Dashicons be used in plugin menu icons?

Yes. The icon class can be passed to add_menu_page(), such as dashicons-admin-tools or dashicons-chart-pie.

Can Dashicons be resized?

Yes. They can be styled with CSS using font-size, width, and height.

Are Dashicons accessible?

They can be, if used with care. Decorative icons should use aria-hidden="true". Icons that carry meaning should have readable text or an accessible label.

Should modern themes use Dashicons?

For admin screens, yes, when the style fits. For public design systems, SVG icons may be a cleaner and lighter choice.