They say that the hardest part of being a developer is naming things. But Dave Woestenborghs has another suggestion:
"Some people say that choosing an icon is the hardest part of being an Umbraco developer"
— Dave Woestenborghs, DF21
Hatching the plan
What made choosing the icon even harder was finding it, even if you knew what you were looking for! The search only matched on the name of the icon.
As a British English-speaker I always struggled to remember the name of the wrench icon - that's what we call a "spanner"! It also wouldn't come up in a search for a "preferences" or "settings" icon.
Another speed bump in the icon picking process was that icons were sorted alphabetically by name and not in logical groups. This meant that tools and wrench were separated by around half of the other hundreds of icons!
And so a plan to tackle this problem was hatched.
Digging up Umbicosaurus
So what was Umbicosaurus and why did it die?
Umbicosaurus (that’s a contraction of “Umbraco icon thesaurus”, in case you were wondering!) replaced the Umbraco icon picker with a custom one that grouped icons by category, allowed searching by alternative names (hence “thesaurus”) and showed similar icons to the one you’d already picked. (And all with some dinosaur graphics for good measure!)
This allowed searching for "spanner" to return the wrench icon. Or if browsing instead of searching, all the tool icons were listed together. And if you picked the wrong wrench icon the first time round, the other wrench icon was listed first as a “related icon”.
I knew all along though, the UI was just a small part of the project. The important part was maintaining the list of keywords, categories and related icons. And this was the time consuming and difficult part. But, this being the Umbraco Community, support was rallied and the following people each made huge contributions to the dictionary:
At Codegarden that year, Umbicosaurus was one of 2 runner ups in the “Best Editor Experience” Umbraco Package Award alongside big hitters such as Contentment and Plumber (now Umbraco Workflow).
Version 1 of the package was planned to be released once most of the icons were categorised... which unfortunately meant of the 26 versions released all were 0.1.x versions! The task of creating the thesaurus proved too much and a year later, in 2022, development ceased.
Life finds a way!
It was around that time that Niels Lyngsø, Product Designer at Umbraco, approached me about bringing some of these ideas into the core Umbraco product. This felt like the perfect solution to my initial problems and would mean a larger set of eyes would get to use and maintain the project.
The fantastic news is that all the hard work the contributors made to the initial project have been ported over to the new icons in Umbraco 17 by Niels and they live on!
The current UI implementation only makes use of the keywords from the original project, but all the other data has been ported over too meaning it can be made use of in future versions of the backoffice (or even future packages!)
You’ll be pleased to know my “spanner” use-case is working well and Niels even added fuzzy searching to help with handling typos.
But there are plenty of other really handy use cases for this too. This search for “delete” returns other helpful icons (particularly the trash icons!) where previously it would only have returned the first two.
Contributing going forwards
The thesaurus now sits in the Umbraco CMS repository where pull requests to update the keywords can now be made. The structure is very similar to the original file in Umbicosaurus with each item in the icon pack array looking like this:
{
"name": "icon-tools",
"file": "wrench.svg",
"keywords": [
"spanner",
"settings",
"wrench",
"screwdriver"
],
"groups": [
"item",
"tool"
],
"related": [
"icon-wrench",
"icon-tools"
],
"legacy": true
}
keywords replaces the Umbicosarus thesaurus entry, and the groups array replaces the group space-separated list, while related remains the same.
The Umbicosaurus dinosaur icons are made by Freepik from www.flaticon.com