How to Set a Screen Icon for Your Plugin or Theme Options Page

Written by Jean Galea
Written by Jean Galea
A nice touch when building a theme or plugin options page is to add your own icon next to the heading on the options page. Here's how to do it.

Partner Sponsors

BionicWP

Full disclosure: If you purchase through a link on our site, we may earn a commission. Learn more.

A nice touch when building a theme or plugin options page is to add your own icon next to the heading on the options page.

Here’s the correct way to do it:

First pass a string with the name of your plugin to the screen_icon() function, like so:

[php]
screen_icon( ‘my-plugin’ );
[/php]

Then in your plugin’s CSS file, add something like so:

[php]
#icon-my-plugin {
background: transparent url( ‘plugin-icon.png’ ) no-repeat;
}
[/php]

This is preferable to adding the image directly into the HTML on the plugin options page. Only the approach of a

with a background image gives you the possibility to use a CSS sprite for the image, which is a great benefit, and which is something core and some plugins do.

Reference: http://core.trac.wordpress.org/ticket/19878

If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.

This article was filed in our archives.
Written by Jean Galea
Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

In this article

Discover More

One Response

  1. Jean this is real awesome, I was search for solution an hour. it helps lot

    extra information to add this style in admin head use add_action( ‘admin_head’, ‘admin_css’ ); this action.

Share Your Thoughts

Your email address will not be published. Required fields are marked *

New discoveries, every week.
Join thousands of designers, developers, and builders that come to WP Mayor to find the best guides, tools, and services for their next website. One email, once a week.
WP Mayor Newsletter

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.

What's missing?