ClassicPress Dashicons

4-minute read

Using ClassicPress Icons in Plugins and Themes

If you just need a few icons for a plugin or theme, you can often get by using the core ClassicPress icons. They’re all loaded up and ready to go – no need to bring in external libraries.

There are more than 230 built-in ClassicPress icons that can be used by plugin and theme developers without loading external libraries. The icons can be resized with zero loss of quality and they can be completely restyled with CSS. What’s not to love? The built-in icons are not as robust as other font-icon collections, but, they are worth taking a look.

How to Use ClassicPress Icons

Step 1: Create the Containers

Creat two empty containers, one nested inside the other. The inner-most container should be given a base class of either dashicons or dashicons-before. Add another class to the inner container in the form dashicons-slug, where slug is replaced with the slug of the particular icon you want to display. For example, to display a lock icon, you would use:

Step 2: Add the CSS

Want to style the size and colors of your icons? Add any custom rules to your theme’s style.css file. The font-size rule changes the size of the icon. Here’s an example of changing the size and colors.

Where to Use ClassicPress Icons

You can use the ClassicPress icons virtually anywhere. You can use them in your plugin and theme options menus to match the core style, you can use them on your admin pages to make your headers look great – you can even use them in posts! By default, they are only loaded on the back-end, so if you decide to use them on the front-end, you’ll have to enqueue the style sheet, as shown below. Note that you should change prefix to meet your needs.

 

ClassicPress Icons and Slug Names

Admin Icons

menu
admin-site
dashboard
admin-post
admin-media
admin-links
admin-page
admin-comments
admin-appearance
admin-plugins
admin-users
admin-tools
admin-settings
admin-network
admin-home
admin-generic
admin-collapse
filter
admin-customizer
admin-multisite

Welcome Screen Icons

welcome-write-blog
welcome-add-page
welcome-view-site
welcome-widgets-menus
welcome-comments
welcome-learn-more

Post Format Icons

format-aside
format-image
format-gallery
format-video
format-status
format-quote
format-chat
format-audio
camera
images-alt
images-alt2
video-alt
video-alt2
video-alt3

Media Icons

media-archive
media-audio
media-code
media-default
media-document
media-interactive
media-spreadsheet
media-text
media-video
playlist-audio
playlist-video
controls-play
controls-pause
controls-forward
controls-skipforward
controls-back
controls-skipback
controls-repeat
controls-volumeon
controls-volumeoff

Image Editing Icons

image-crop
image-rotate
image-rotate-left
image-rotate-right
image-flip-vertical
image-flip-horizontal
image-filter
undo
redo

TinyMCE Icons

editor-bold
editor-italic
editor-ul
editor-ol
editor-quote
editor-alignleft
editor-aligncenter
editor-alignright
editor-insertmore
editor-spellcheck
editor-expand
editor-contract
editor-kitchensink
editor-underline
editor-justify
editor-textcolor
editor-paste-word
editor-paste-text
editor-removeformatting
editor-video
editor-customchar
editor-outdent
editor-indent
editor-help
editor-strikethrough
editor-unlink
editor-rtl
editor-break
editor-code
editor-paragraph
editor-table

Posts Screen Icons

align-left
align-right
align-center
align-none
lock
unlock
calendar
calendar-alt
visibility
hidden
post-status
edit
trash
sticky

Sorting Icons

external
arrow-up
arrow-down
arrow-right
arrow-left
arrow-up-alt
arrow-down-alt
arrow-right-alt
arrow-left-alt
arrow-up-alt2
arrow-down-alt2
arrow-right-alt2
arrow-left-alt2
sort
leftright
randomize
list-view
excerpt-view
grid-view
move

Social Icons

share
share-alt
share-alt2
twitter
rss
email
email-alt
facebook
facebook-alt
googleplus
networking

WordPress.org Specific Icons

hammer
art
migrate
performance
universal-access
universal-access-alt
tickets
nametag
clipboard
heart
megaphone
schedule

Product Icons

wordpress
wordpress-alt
pressthis
update
screenoptions
info
cart
feedback
cloud
translation

Taxonomy Icons

tag
category

Widget Icons

archive
tagcloud
text

Notification Icons

yes
no
no-alt
plus
plus-alt
plus-alt2
minus
dismiss
marker
star-filled
star-half
star-empty
flag
warning

Miscellaneous Icons

location
location-alt
vault
shield
shield-alt
sos
search
slides
analytics
chart-pie
chart-bar
chart-line
chart-area
groups
businessman
id
id-alt
products
awards
forms
testimonial
portfolio
book
book-alt
download
upload
backup
clock
lightbulb
microphone
desktop
laptop
tablet
smartphone
phone
index-card
carrot
building
store
album
palmtree
tickets-alt
money
smiley
thumbs-up
thumbs-down
layout
paperclip

There are also a few more examples here.

Wrapping Up

ClassicPress has a set of core icons that can be used in situations where you prefer not to load external icon sets. While the available icons aren’t as robust as the more popular font-icon libraries, they often work well when you’re in a hurry, don’t want to make external calls, or just need to create quick mockups. They may not suffice for every situation, but, they are worth examining and having an understanding of how they work.

What do you think?

Do you ever use the icons built into ClassicPress? Are they just too limiting to bother? What icon library would you add to ClassicPress core if it were up to you? I’d love to hear what you think – let me know in the comments!

0 comments on “Using ClassicPress Icons in Plugins and Themes”

    Leave a Reply

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

    shares