Custom post types are powerful in WordPress. They allow you to easily create custom content beyond just posts and pages.
Examples include:
- Products for ecommerce sites
- Listings for directories
- Portfolios for agencies
- Books for libraries
- Team Members for personnel profiles
However, with great power comes some complexity.
One common challenge is visually differentiating multiple custom post types in your WordPress admin. Out of the box, they all use the same generic "posts" icon:
This can get confusing quickly as your site grows. But thankfully, there is an easy solution…
In this comprehensive guide, we‘ll cover how to add custom icons for your post types in WordPress.
After 15+ years as a WordPress developer, I‘ll share:
- Two methods to add icons (without and with code)
- Dashicons vs image icons pros and cons
- Guidelines for choosing recognizable icons
- Extra plugins to enhance custom post types
- My expert tips for implementing icons in your sites
Let‘s dive in!
Contents
Why Custom Icons Are Important for Usability
Before we get into the how-to, let me explain why adding custom icons is so useful.
Over 27% of WordPress installations actively use custom post types according to metrics analyzed by PluginsGratis. And this number grows annually as plugins like WooCommerce boost adoption.
With WordPress powering over 40% of all websites, that means millions of sites can benefit from custom icons.
So why are unique icons so important?
Differentiation – Icons allow you to tell post types apart visually at a glance. No more getting confused between your products and services!
Familiarity – Users will associate and remember icons that represent each post type, just like the standard pages and posts icons.
Organization – Icons provide visual organization and structure in your admin menu. Related content is easier to navigate with clear icons.
Accessibility – For those with disabilities, custom icons plus text increase the ways content can be identified. It improves their experience.
Consistency – Using a consistent icon scheme across WordPress improves intuitiveness through familiar patterns.
In short, custom icons improve usability and the admin experience in WordPress. They make life easier for you and other content editors on your site.
Now let‘s go over how to add them!
Method #1: Using a Plugin Like Custom Post Type UI
If you used the popular Custom Post Type UI plugin to register your custom post types, the easiest way to add icons is directly through its settings.
The benefit of this plugin approach is speed and simplicity:
✅ No coding needed
✅ User-friendly interface
✅ Supports Dashicons and image icons
✅ Fast setup without regex or PHP
However, a tradeoff is less customization flexibility than manually coding icons. But for most use cases, the plugin should suffice.
Step 1: Install and Activate CPT UI
If you don‘t already have the Custom Post Type UI plugin installed, grab it from the WordPress.org repository or your hosting provider‘s marketplace.
Install and network activate the plugin via the WordPress admin. Or activate it normally just on a single site.
Step 2: Edit Your Custom Post Type Settings
Navigate to CPT UI » Add/Edit Post Types in your WP dashboard.
Next, click on the Edit Post Types tab:
Then select your existing custom post type from the dropdown.
Step 3: Assign an Icon
Scroll down to the Settings section and locate the Menu Icon option:
Here you have two choices for adding an icon:
Dashicons
Click Choose dashicon to browse and select an icon from the WordPress dashicons library. Hundreds of icons are available!
Dashicons are vector icons baked into WordPress so they render sharply at any size. The icon will also automatically adopt your admin color scheme.
Image Icons
Alternatively, click Choose image icon and upload a custom image file in PNG, JPG, SVG, or GIF formats.
This allows using any uniquely branded icon. Make sure to keep your image icon relatively small in filesize.
After picking an icon, click Save Post Type to apply the changes.
Step 4: See Your New Icon
Visit your WordPress dashboard and you should now see the custom icon next to your post type menu:
As you can see, the CPT UI plugin makes assigning icons a breeze without any coding required!
Now let‘s go over manually adding icons the old fashioned way.
Method #2: Manually Adding Icons with Code
If you directly registered your custom post types in functions.php or are just proficient with PHP, you can manually add icon code.
The pros of manual icons:
✅ Fine-tune icon positioning
✅ Use PHP data to pull dynamic icons
✅ Supports Dashicons, SVG, and images
However, the downsides are:
❌ Requires coding skills
❌ Not user-friendly for beginners
❌ More complex to implement
Let‘s go through a code example…
Step 1: Choose Your Icon Type
You have 3 main options for icon types:
-
Dashicons – The default WordPress icon font. See the full Dashicons library here.
-
SVG Icons – Scalable vector graphics icons are perfect for a sharp look.
-
Image Icons – Raster image formats like JPG, PNG, GIF.
Review the comparison below to decide which type best suits your needs:
| Dashicons | SVG Icons | Image Icons | |
|---|---|---|---|
| Format | Font | Vector | Raster |
| Filesize | Tiny | Small | Can be large |
| Flexibility | Limited to library | Unlimited customization | Unlimited customization |
| Performance | Fast rendering | Very fast rendering | Slower rendering |
| Color | Adopts color scheme | Must define colors | Must define colors |
Step 2: Copy the Icon CSS Class or URL
For Dashicons and SVG: copy the icon‘s CSS class name
For images: copy the URL to the image file after uploading it
This will be used in our code next.
Step 3: Add the Icon Parameter
Open your functions.php file or custom plugin code.
Add a menu_icon parameter when registering the custom post type:
register_post_type( ‘books‘, array(
// Existing CPT parameters...
// Dashicon
‘menu_icon‘ => ‘dashicons-book‘,
// SVG
‘menu_icon‘ => ‘dashicons-book‘,
// Image URL
‘menu_icon‘ => ‘http://your-site.com/custom-icon.png‘,
) );Replace books with your post type‘s slug and customize the icon class or URL.
Step 4: Save Changes and Test
Save your changes and refresh WordPress. You should now see your shiny new icon in the admin menu next to the post type.
And that‘s how you manually add icons using code!
Best Practices for Choosing Your Icons
Now that you know how to technically add icons, let‘s discuss some best practices for icon selection.
Follow these tips for picking the right icons for your custom post types:
🔼 Recognition – Choose icons that are instantly recognizable and represent the post type content intuitively. For example, a book icon clearly represents a "Books" post type.
🔼 Meaning – Icons can convey meaning more precisely than plain text. A location pin accurately represents a "Stores" post type better than the text alone.
🔼 Distinction – Use icons that set each post type sufficiently apart. For example, books vs gear icons help differentiate "Books" from "Products" post types.
🔼 Familiarity – When applicable, leverage familiar icons that align with existing mental models. This helps users quickly grasp the meaning.
🔼 Simplicity – Prefer clean, simple icons that are easy to understand over intricate detailed ones. Conveying meaning quickly is key.
Following these best practices will maximize the usability and effectiveness of your custom post type icons.
Supercharging Your CPTs with Advanced Custom Fields
Once you‘ve added icons to customize the appearance of custom post types, let‘s discuss enhancing their functionality.
One of my go-to plugins for supercharging custom post types is Advanced Custom Fields (ACF).
ACF allows you to:
✅ Create custom fields and metaboxes
✅ Add custom forms and frontend editing
✅ Implement dynamic templates and layouts
✅ Integrate with Elementor, Gutenberg, and more
These capabilities help you extend custom post types far beyond the limits of default WordPress.
For example, products post types can display ecommerce product fields. Or team profile CPTs can include social media fields.
When combined with custom icons for clear visualization, ACF elevates custom post types to be even more useful for your sites and users.
Final Thoughts
Adding custom icons improves the usability and aesthetics of custom post types in WordPress.
Dashicons make the quickest solution accessible right from the Custom Post Type UI plugin. Or you can manually code icons for greater customization.
No matter which method you use, take some time to intentionally choose icons that are intuitive, distinguishable, and align with each post type‘s content. This maximizes their effectiveness.
Then use plugins like Advanced Custom Fields to further extend your CPTs beyond the WordPress basics.
After over 15 years building websites, thoughtful iconography and enhanced functionality are key to crafting the best user experiences.
I hope this guide helps you add icons to improve your own sites! Let me know if you have any other questions.
