Building the WordPress Icon Library

Last week I was inspired to quickly code up a one-pager: a searchable guide to the WordPress icon library. I spun up a tweet thread all about it, but figured I’d better archive that here as a blog post as well.

The WordPress Block Editor comes with an SVG icon set that replaces the old Dashicons icon font (sorry, no palmtree). You can use these icons when building custom blocks or extending the functionality in the block editor.

Like much of Gutenberg, the @wordpress/icons package is also standalone and can be used almost anywhere else. Adding it to your project is as simple as running npm install @wordpress/icons and importing the components you need. 

But these Gutenberg packages still struggle with discoverability and documentation. I wanted a simple reference site like most of the other icons libraries have, including a “click to copy” feature to quickly grab the icons I need.

Enter wphelpers.dev – a small website from Aurooba Ahmed and the perfect place for me to bring this idea to life. The site runs on Nextjs, so making a pull request with my new idea (and the @wordpress/icons package) was a breeze.

It’s moments like these that the whole ecosystem of open-source + components + packages really shines. Everything “just worked”. It was so easy to fork her code and contribute an idea, building off a number of tools in the ecosystem.

Once I created my concept and submitted a pull request, Netlify automatically generated a live demo of my branch so we could discuss it. Github gave us a place to comment on the individual lines of code. Modern web development can be very cool sometimes.

Finally, we recorded an upcoming viewSource episode where Aurooba reviewed my PR in real time. We dive into what it’s like contributing to projects on Github. If you’re trying to break into the industry, sharing ideas and contributing code is one of the best ways to do it.

So check out the WordPress Icons Library on wphelpers.dev – and let us know if you have any other ideas that might help the WordPress community. https://wphelpers.dev/icons

Learn Modern WordPress Development

I’m sharing the best resources and tutorials for developers building in and on the block editor.

3 responses to “Building the WordPress Icon Library”

  1. Anh Tran Avatar

    I wish I knew this yesterday! I was revamping the UI of the Meta Box Builder plugin and I wanted to use Gutenberg icons instead of Dashicons. Looking at the docs and Storybook of Gutenberg, I found it’s hard to find the icon I needed.

    Previously, Tung Du from 10up (now he’s working for Automattic) built a similar app, but it’s abandonded now.

    Thanks a lot for building this. I’m sure I’ll need it in the future.

    1. Brian Coords Avatar
      Brian Coords

      Glad it could come in handy! I agree, the storybook is just not quite useful enough.

  2. Devin Egger Avatar
    Devin Egger

    This is extremely cool – I’ll be sure to watch the VS episode on this later today. Too bad about the [palmtree] though…

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.