Icons overview

[bjarnef]

Currently we have an overview on essential icons here: https://uui.umbraco.com/?path=/docs/uui-icon-registry-essential--docs

But there are more icons included, which are lazy loaded in new backoffice.

I have used this overview of icons in old backoffice: https://nicbell.github.io/ucreate/icons.html

However it is sometimes difficult to find the right icon unless one search by name.
It has been suggested in past to attach meta data to icons umbraco/Umbraco-CMS#9122 , it could be a category and/or different tags.

I like something like this overview, which allow to search by name or keyword and furthermore seems to be grouped by category:
https://circuit.sumup.com/?path=/docs/features-icons--docs

It is very much similar to how it works in overview of Lucide icons: https://lucide.dev/icons/categories

I think part of this may require additions to UI library, but eventually also implementation/extention in backoffice repository.

[nielslyngsoe]

Hi @bjarnef Good idea, this cannot be part of UI Library as this does not know about all the icons from Backoffice.

But we do have a Backoffice Storybook as well, where this could take part. But I hear that you would like some better UX in terms of searching and grouping the icons?

In that way I guess it all starts with the data, the data for icons is already made a JS Objects in Bellissima, so there is room to append more data. Keywords, grouping etc.

We also got a verbal permission to use the data from https://github.com/glombek/umbicosaurus
Which I assume still counts, @glombek / @JasonElkin ?

So the data is here, we just need to implement it :-)

[glombek]

Absolutely, please use this! It'd be great to see that go somewhere!

Have the icon names changed with the new icons, though? If so it may not be all that useful!

[bjarnef]

FYI it was also something requested here a while ago: umbraco/Umbraco-CMS#9122

It would make it easier to group icons based on category/groups, search/filter on keywords/tags (and not just icon name). It would also benefits addons which ship its own set on icons, e.g. Umbraco Commerce or Umbraco Forms.

[bjarnef]

Can't it have something like this based on essential icons:
https://circuit.sumup.com/?path=/docs/features-icons--docs

and then in backoffice storybook extend this (or add similar functionality based on larger icon set).

[glombek]

These links from @bjarnef on another thread look better than Umbicosaurus.

#629 (comment)
#629 (comment)

[nielslyngsoe]

Actually I just had to find the URL for the Backoffice Storybook, cause that already has this. Its right here:

https://apidocs.umbraco.com/v15/ui/?path=/docs/umb-icons--docs

I know that does not give the nice search UI, but it gives you an overview.

[bjarnef]

A though about the social/brand icons. I know these has been removed (or not more added) from Lucide icons.
I know the social/brand icons are from https://simpleicons.org/ but I wonder if the default ones should use outline style as Lucide icons?

E.g. https://www.flaticon.com/free-icons/gitlab