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.

Introducing a new thing! WordPress Icons Library- A searchable guide to the complete #WordPress icon library from Gutenberg.https://t.co/CQkCjmyVGp

A quick 🧵 on what and why this: pic.twitter.com/RIHUyf2Zvi

— Brian Coords 💻 (@briancoords) May 5, 2023

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