Icon pack in Anytype — any recommendations?

Talk
1

The importance of icons in the UI for navigation is high. The current set used is lacking, we need to deploy an icon set that meets three main criteria:

  1. Better search indexing of its icons so users can easily find a suitable choice based by typing words to surface a shortlist of suggestions.

  2. Has a higher quantity of options to cover a variety of topics, ideally 1000+.

  3. Has a solid/filled icon design.

If the pack is open-source, that’s even better, however not essential.

Currently we’re seeing that Phosphor and Boxicons could be good options, but if the community has any suggestions, we’re all ears.

2

As a separate topic: we’ve discussed the ability of using icons instead of emojis for objects.

One issue is that emojis distinguish between what is an object and what is a type/collection/etc.—by using icons on both it could cause confusion. That being said, it has been requested multiple times, so it’s worth bringing it up as a discussion.

  1. Option to manually use icons on objects
  2. Option to change default setting to only display icons (overriding emojis).
  3. Option for objects to inherit the type’s icon and colour by default upon creation. Currently it’s grey.

Looking forward to the feedback.

4

Boxicons is more consistent whether outlined or filled, Phosphor looks a little bit like being designed by multiple persons.

Another suggestion is Tabler Icons: 4950+ free vector icons for web design it’s a really huge collection of icons and are consistent

I like all of the three options with agreeing mostly with the 3rd one.

I guess this may be left for the preference of the user, if they get confused, they can disable it or use emojis

5

Wow, never heard of Phosphor before. That’s a really valuable resource!

I’ve used https://iconmonstr.com/ in the past. The icon set is a lot smaller. As far as I know it’s just one person making the icons (and the last icon was made ~3 years ago so I think what you see is what you’re going to get).

8

https://fontawesome.com/ however it’s not open source.

I appreciate that most features in Anytype give users the option to customize. I use a mix of emojis and icons, so please don’t give us just one or the other.

9

100%, you will definitely have access to both emojis and icons. The ‘restriction’ today is that you can’t use the icon library on objects (only types), so by changing this we’re technically giving users more options.

10

Great discussion so far, I’d love to weigh in on both of these points!

1. The Icon Set Shortlist

Hexara makes a fair point Phosphor’s filled icons can sometimes feel a bit inconsistent across the set. If you’re looking for perfect consistency in a solid weight with great search indexing, I highly recommend looking at Remix Icon (Apache License).

It has over 2,800 icons designed specifically for dense web UIs

A lot of icon packs are designed as outlines first, making the “filled” versions look like an afterthought. Remix actually features a perfectly balanced “Solid” version for every single icon,

Material Symbols (Google ) is also a strong backup, their search keyword indexing is virtually flawless, and you can easily set the variable font axis to “Fill” across all 3,000+ icons.

2. Icons vs. Emojis on Objects

From a UX standpoint, combining Option 1 and Option 3 feels like the strongest move,

Option 3 (Inherit type’s icon/color) ,This is a huge win. It instantly fixes the “sea of grey” problem and visually maps out the user’s database structure without them lifting a finger.

Option 1 (Manual override) Power users always want to break the rules to customize their setups. Letting them manually swap an object’s icon (or go back to an emoji) gives everyone the best of both worlds.

Hope this helps narrow things down!

11

Thanks for the feedback, I didn’t come across this set yet. It’s nice but maybe a little ‘square’ compared to the Anytype UI. I’m thinking something more rounded is likely more suitable.

I feel like Boxicons is the best choice so far.

From my perspective, we can deploy all three options and let the users do as they please. :stuck_out_tongue:

12

Yeah, I really like Boxicons a lot.

Do you have any idea if we can see this in the next release or not yet?

13

Possibly, but it’s not in the plan yet because we haven’t made a decision on the icon set. But once we do, I imagine it wouldn’t be too difficult.

We’d just have to map existing icons to the new set so there aren’t any breaks (for backwards compatibility).

14

Is there any possibility of adding your own emojis? It’s something I appreciate. For example, at work, we added emojis (simple image import) to have a specific emoji for certain situations (technical incidents, etc.). Or for less important things, like a chocolate croissant emoji :grin:.
It’s not vital in Anytype, I’m just asking in passing.

15

Yes, you can simply upload the icon as an image (svg, whatever) like a normal media file and then use it.

It’s not in its own category, but it should suffice as long as you don’t have a huge amount of custom icons.

16

I personally would prefer Option 1, so that we should have the ability to choose.

17

Currently we use icons in three places if I’m not missing one:

  • object icon in header
  • „Callout“ icon
  • Type icon

I see the rationale to give Types a separate icon set, to avoid confusion. On the other hand, I think it can be let to the user to differentiate icons for their different purposes. We can’t know what they’ll want to express with icons. So I’d say, if we want to integrate custom icon sets, let’s make them all available across all of the three places.

Having said this: I’m using flaticon.com a lot across AnyType, particularly the „lineal color“ styles. It’s an amazing collection, and imho the lineal color style fits Anytype’s overall style very well :).

It would be great to have a more integrated way of using such a user-selected 3rd party icon collection in AnyType. But in the current phase of development there are certainly other, more urgent questions on the table…