Family Encyclopedia >> Electronics

How to Add Custom Icons to WordPress Custom Post Types: A Step-by-Step Guide

Want to customize your WordPress admin menu with icons for custom post types? As experienced WordPress developers at WPBeginner, we've helped thousands streamline their sites. Here's how to add professional icons using Dashicons or custom images.

Since WordPress 3.8, Dashicons provide scalable, device-friendly icons perfect for post types.

Video Walkthrough

Subscribe to WPBeginner for more tutorials. Prefer reading? Continue below.

Method 1: Using the CPT Custom Icon Plugin

Install and activate the CPT Custom Icon plugin. Then, navigate to Settings » CPT Custom Icon Settings. Your custom post types will be listed. Click 'Choose Icon' next to one, select a Dashicon, and save.

How to Add Custom Icons to WordPress Custom Post Types: A Step-by-Step Guide

Method 2: Using Custom Post Type UI Plugin

For beginners, use the Custom Post Type UI plugin to manage post types.

Browse the Dashicons library, pick an icon, and copy its CSS class (e.g., dashicons-groups).

How to Add Custom Icons to WordPress Custom Post Types: A Step-by-Step Guide

Edit your post type in CPT UI, click Advanced Options, paste the class into 'Menu Icon', and save.

How to Add Custom Icons to WordPress Custom Post Types: A Step-by-Step Guide

For a custom image: Upload via Media » Add New, copy the file URL, and paste it into the Menu Icon field.

Method 3: Manual Code for Custom Post Types

If registering via code in functions.php or a plugin, add the icon like this:

'menu_icon' => 'dashicons-cart',

Or use an image URL:

'menu_icon' => 'https://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png',

Complete example for a 'Products' post type:

function custom_post_type_products() {
    $labels = array(
        'name'               => _x('Products', 'Post Type General Name', 'textdomain'),
        'singular_name'      => _x('Product', 'Post Type Singular Name', 'textdomain'),
        'menu_name'          => __('Products', 'textdomain'),
        // ... other labels
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'menu_position'      => 5,
        'menu_icon'          => 'dashicons-cart',
        'has_archive'        => true,
    );

    register_post_type('products', $args);
}
add_action('init', 'custom_post_type_products', 0);

This guide draws from years of hands-on WordPress customization. For more, see our tutorial on icon fonts in the post editor.

Subscribe to our YouTube channel, follow on Twitter, or Google+.