Replace fork-awesome font icons with svg icons

[maxlath]

SVG icons to be the way to go forward, as it would offer much more flexibility than font icons. We already have some SVG icons for icons not covered by fork-awesome.

An appealing option could be to use free font-awesome icons within Svelte components, as the following libraries offer:

• svelte-awesome
• svelte-fa

Other options, but that would require to change from current icons:

• phosphor-svelte

See also:

• discussion: Best icon library for Svelte?

[nclm]

Hi! I was actually going to open an “issue” last month about the subject of the icons, something along the lines of “Consider replacing the icon set”. From a technical standpoint, indeed, replacing fonts with SVG makes good sense.

But beyond technicality, it’s a matter of art direction and the feel of the interface.

Unfortunately by now, Font Awesome looks a little too default, dry, developerish, techy. Not necessarily a good fit for the bookish look of Inventaire. However, I really like your font choice for instance (Alegreya and Alegreya Sans), which really lands the cosy librarian look and feel.

So before re-adopting Font Awesome or switching to any another icon set, I suggest to think of it from a design standpoint, and notably to its visual match with the Alegreya family :)

I’m glad that you are suggesting Phosphor already, as this was one of the sets I had in mind! (in it’s Fill variant)

Before making a choice though, I’d say it would be nice to do a small selection of 2-5 possible sets, choose a selection of relevant icons that are important for Inventaire (book icon, shelf icon, etc), and make quick mock-ups of how they look like within interface elements and alongside Alegreya.

That’s what I wanted to do before opening the issue originally and I didn’t have time :) But I could try some day if there’s interest for it.

Of course the sets in the shortlist should be compatibly licensed and available as SVG. I don’t know Svelte so I’m not sure what’s the requirement on that side?

I think that would be the ideal way to make a choice that is a good match for the project :)

[maxlath]

Before making a choice though, I’d say it would be nice to do a small selection of 2-5 possible sets, choose a selection of relevant icons that are important for Inventaire (book icon, shelf icon, etc), and make quick mock-ups of how they look like within interface elements and alongside Alegreya. That’s what I wanted to do before opening the issue originally and I didn’t have time :) But I could try some day if there’s interest for it.

That would be amazing!! :D

I don’t know Svelte so I’m not sure what’s the requirement on that side?

As long as we can get SVG path data (see that example of what font awesome provides), it should be fine.

[nclm]

Great :) I made some tests!

Source file (Inkscape SVG)

Not exhaustive at all, just to get some ideas already and possible directions!

Things to look at are for instance:

• How does the icons feel next to the font’s lettershape (mix of organic rounded curves and sharp corners)?
• Are the shapes of the icons simple enough not to be cluttering the UI and be legible at small size?
• Has the icons shape language enough personality to not feel too default, and does it match Inventaire?
• Are there enough icons in the set to cover the needs?

Some sets also misses some icons (for ex. library), but creative solutions can be found (using for ex. stack, pile, or bar chart instead). In some cases, it might be worth making custom variants of existing icons (for instance, if an icon set does not have a book icon without an extra symbol on the cover, it’s easy to remove the symbol to make a plain book icon), or even a new extra icon if one is missing (that can be contributed back to the set!). Some sets have several variants for some of the icons too. But as long as the vast majority of needed icons are available, it should be fine.

My gut feeling right now among these is towards Streamline Core Solid, or maybe BoxIcons Solid. But other directions could work too! Let me know what you think :)

[jum-s]

Nice mock-ups!

• Phosphor has a svelte integration option <3
• BoxIcons looks unmaintained, but what does it mean to have "up-to-date" icons anyway. I guess CC-BY is better than Phosphor's MIT. Looking at how the "shelf" icon is prominent in Inventaire, BoxIcons' objects-vertical-bottom can make a good alternative.

[nclm]

(another interesting option could be https://www.mingcute.com which has some nice book icons and is licensed under Apache 2.0)

[maxlath]

https://lucide.dev (ISC License) and some more options have been suggested here https://www.reddit.com/r/sveltejs/comments/1gm8iir/svelte_5_icon_library_compatible/ . I think it makes sense to first migrate to Svelte 5 (which I would like to look into once we are done with the current set of funded milestones that expire on 2025-02)