Skip to main content

We prefer using SVG for icons, but the circle around active prefilters with a png icon are more clear

 

 

It is also difficult to find a optimal solution, that works for dark and light mode

Hopefully this can be improved a little.

 

Hi Harm!

It would be of great help if you can give context to what your users encounter with prefilters, your question is more of a statement now which forces me to guess what you are trying to achieve.

I think you are talking about showing active prefilters with only an outline on .svg buttons? And if so, the outline on .png was already a work-around, the solid background for.svg buttons is designed to improve seeing the active state. What makes you think differently?

In the second part you are referring to ‘an optimal solution’, can you elaborate on this subject as well? I am unable to look into your mind, help us to think with you!


These prefilters belong to a very simplified screen for order pickers which need to filter orders for today (Vandaag), tomorrow (Morgen), this week (Week) or next week.

In this case it could even work without assigning a icon.

If we use transparent svg icons it could happen that there is not enough contrast between the color of the icon and the background of the filter button, it could also happen that the contrast is good for light mode and worse for dark mode. 

We have seen that when we use a transparent png, the background remains always the same and active state of the prefilters are made clear with just the colored outline.

Maybe the picture below makes it more clear:
 


and another example, with transparent svg
 

 


Reply