How to Use Custom Icon for Custom Post Type

In today’s tutorial, we’ll show you how to use custom icon for custom post type you’ve added to your site. If you’re new to custom post types (CPT), you may first want to read our article on How to Create Custom Post Types in WordPress.

After you’ve successfully created a new CPT, you’ll see a default ‘pin’ icon is being used as the icon for your CPT menu. However, this can easily be changed with any other icon of your choice.

In this example, we’ll be using Dashicons icon font. Since this icon font is already comes with WordPress core since WordPress 3.8, it’ll make it easier for us to use any icon in the Dashicons icon font set. For complete icon font available for Dashicons, please see the Dashicons official page.

To use a custom icon, you’ve to to pass a string to menu_icon argument. In this example, we’ll be using a star icon as the custom icon and from Dashicons official page, the class for this icon is 'dashicons-star-filled'. Here’s an example to create a Portfolio CPT. As you can see in line 14, we paseed the menu_icon argument with the class the the icon which is 'dashicons-star-filled'.

<?php

// Create portfolio custom post type
 
add_action( 'init', 'register_cpt_portfolio' );
 
function register_cpt_portfolio() {
  register_post_type( 'portfolio',
		array(
			'labels' => array(
				'name' => __( 'Portfolio', 'portfolio' ),
				'singular_name' => __( 'Portfolio', 'portfolio' ),
			),
			'menu_icon' => 'dashicons-star-filled',
			'exclude_from_search' => true,
			'has_archive' => true,
			'hierarchical' => true,
			'public' => true,
			'rewrite' => array( 'slug' => 'portfolio' ),
			'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'page-attributes' ),
		)
	);
}

Here’s the result:

Furthermore, you may also use an image as the icon. For more information about this, please refer to the WordPress Codex page.