[Feature request] Add filter: stroke || fill

[okyr-ux]

Some icon sets are designed using strokes, some are designed using fills. This is a huge difference for designers. These icons behave differently on scaling: stroke icons keep constant stroke width, or it can be easily changed. Fill icons keep the proportions on scaling. Sometimes you need one feature, sometimes another.

Examples:

• Stroke icon sets: Lucide
• Fill icon sets: Material Design everything

It seems to be easily achieved via SVG code parsing:

• Stroke icons have something like fill="none" stroke="currentColor" stroke-width="2" (stroke width can be any number)
• Fill icons have fill="currentColor"

Thank you in advance! You make an awesome job, if you need any help with this ↑ — please let me know.

[cyberalien]

I've been thinking about that as well for next generation of API. My current plan is to allow filtering icons by:

• Palette (uses currentColor or has hardcoded palette)
• Fill/stroke
• Animations
• Dimensions

[okyr-ux]

In my humble opinion, all these filter types should be prioritized and divided into separate tasks:

• Palette: The majority of sets use currentColor, so this looks as a low-priority filter to me;
• Fill/stroke: from my estimation, ~20% use stroke, another ~20% are mixed (some figures use fill, some use stroke), that's why this is more high-priority;
• Animations: also, I guess maybe 5 sets use animations, so not a big deal to remember them all, it means a low-priority task;
• Dimensions: that's a really important filter! And there's a big spread of values, so that would be another high-priority task.

Please don't take it as arrogance 😊

[cyberalien]

Thanks. Ideas and feedback are always welcome!

Priority doesn't really matter because it is all done during same loading process in API. When icon set is loaded, checking each icon for palette, animations and other stuff doesn't take any time and extra coding.

Biggest issue is rewriting API to support it. That is part of big rewrite that I'm doing right now, which includes new API, icon picker and relies on new version of Iconify Utils and Iconify Tools. This is a big work, so it will take some time to finish.

About animations: it is actually only 2 icon sets. Big issue is lack of tools to create animations, so this is very hard to do. I'm hoping more designers look at examples of animations, see how they work, check out spec, test stuff and create more animated icons.

[cyberalien]

Added tags property to icon set information. In future update I'll use it to sort icon sets:

• Fill tag for icon sets that use fill.
• Stroke tag for icon sets that use stroke.
• Grid tags for icon sets designed for specific grid, such as 24x24.

Icon sets that use both fill and stroke won't have either of those tags. Icon sets that use multiple grids, won't have grid tag. This way when user clicks tag, it guarantees that icons match that tag.

At least that's the idea for now. Tags can be used for other filters too, so it can be expanded as new filter for all icon sets instead of categories.

[cyberalien]

Added ability to filter icons by stroke/fill in new API. It is currently in development, but already stable and I'm expecting to push it to live servers sometime this month.

To filter icons by stroke/fill, search for something like home stroke=true or home fill=true. It doesn't check actual stroke width, only that icon uses stroke.

I'll post update here when new API servers go live.

[cyberalien]

It is live now for most visitors from Europe, will be available to other regions this weekend.