Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Add Icons for Custom Post Types in WordPress

Ever wondered how you could add custom icons for your custom post types in WordPress? If so, then you’re in the right place. In this article, we will show you how to add icons for custom post types in WordPress.

WordPress started using an icon font called Dashicons since WordPress 3.8. These font icons look great on any device or screen size. Well, you can leverage these icons to assign custom icons to your post types.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Adding Custom Post Type Icons using a Plugin

First thing you need to do is install and activate the CPT Custom Icon plugin. Upon activation, simply go to Settings » CPT Custom Icon Settings where you will see your custom post types listed. Next, click on the ‘Choose icon’ button next to a custom post type and then select a font from the menu.

Choosing a font for your custom post type using a plugin

Adding Icons using Custom Post Type UI Plugin

If you’re new to registering a custom post type, then we recommend that you use Custom Post Type UI plugin to create and manage custom post types and taxonomies.

Adding an icon to a custom post type created with CPT UI plugin is very simple. It supports Dashicons by default, so first you need to visit the Dashicons website and select the icon you want to use for your post type.

Copying an icon class from Dashicons website

Clicking on an icon in the list will show a larger version of the icon on the top. Next to it, you will see the icon’s CSS class. It will be something like dashicons-groups, dashicons-calendar, dashicons-cart, etc. You need to copy the CSS class and edit the custom post type you want to edit in CPT UI. All you need to do is click on the Advanced Options link and scroll down to the Menu Icon section, then paste the CSS class and save your changes.

Adding font icon in custom post type UI plugin

You can also create an image icon yourself and upload it by clicking Media » Add New. After the upload, click on the Edit link and copy the image file URL. Now simply paste this URL in the menu icon field in CPT UI settings.

Manually Adding Icon to a Custom Post Type

If you created a custom post type by placing a code in your site-specific plugin or functions.php file, then you can add menu icons manually. Once again simply visit to Dashicons website to select an icon and copy the CSS class. After this add it to your custom post type code like this:

'menu_icon'           => 'dashicons-cart',

You can also add the full URL of an image file you want to display as icon, like this:

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

Here is a full code snippet that creates a custom post type called products with a menu icon:

// Register Custom Post Type
function custom_post_type() {

	$labels = array(
		'name'                => _x( 'products', 'Post Type General Name', 'text_domain' ),
		'singular_name'       => _x( 'Product', 'Post Type Singular Name', 'text_domain' ),
		'menu_name'           => __( 'Products', 'text_domain' ),
		'parent_item_colon'   => __( 'Parent Item:', 'text_domain' ),
		'all_items'           => __( 'All Items', 'text_domain' ),
		'view_item'           => __( 'View Item', 'text_domain' ),
		'add_new_item'        => __( 'Add New Item', 'text_domain' ),
		'add_new'             => __( 'Add New', 'text_domain' ),
		'edit_item'           => __( 'Edit Item', 'text_domain' ),
		'update_item'         => __( 'Update Item', 'text_domain' ),
		'search_items'        => __( 'Search Item', 'text_domain' ),
		'not_found'           => __( 'Not found', 'text_domain' ),
		'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),
	);
	$args = array(
		'label'               => __( 'Products', 'text_domain' ),
		'description'         => __( 'Post Type Description', 'text_domain' ),
		'labels'              => $labels,
		'supports'            => array( ),
		'taxonomies'          => array( 'category', 'post_tag' ),
		'hierarchical'        => false,
		'public'              => true,
		'show_ui'             => true,
		'show_in_menu'        => true,
		'show_in_nav_menus'   => true,
		'show_in_admin_bar'   => true,
		'menu_position'       => 5,
		'menu_icon'           => 'dashicons-cart',
		'can_export'          => true,
		'has_archive'         => true,
		'exclude_from_search' => false,
		'publicly_queryable'  => true,
		'capability_type'     => 'page',
	);
	register_post_type( 'Products', $args );

}

// Hook into the 'init' action
add_action( 'init', 'custom_post_type', 0 );

We hope this article helped you add icons for your custom post types in WordPress. You may also want to check out how to use icon fonts in WordPress post editor.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

5 CommentsLeave a Reply

  1. Thanks for this post. I’m not sure why it is not working for me. Any ideas on where to look?

  2. Thanks for your helpful article! A tiny information missing is the pixel dimensions of an icon in case you refer to an image by defining a full url. Otherwise very nice!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.