These are the icons we have made for one of the product and these ones are the finalized ones.

enter image description here .

But we have a problem as we are unable to get a better way to show the selected ones.

One way to do this is by inverting the colors but the issue is we have more than 50 icons overall and from the development perspective we have to provide two SVGs for a single icon to the developers which will make the app heavy.

So my problems are :

(a) Better way to show these icons(in general : icons with long shadow effect) selected.

(b) And a way to show them on the darker backgrounds


EDIT: Thanks for the response people but this is what my concern is. It is difficult to show them selected on the darker backgrounds(keeping the opacity 90-80-70%). this is what I meant by the visibility issues.

dark BG - same icons

Tried adding the white icons on the darker BG but it is not looking pleasing.

dark BG - white ocons

Suggest something. Even you can also suggest the way to show card(presently, we are using the gaussian blur image on the background with the black overlay of 70%).

  • Am I missing something here? why not just show the icon inside a regular looking toggle-button type widget that shows selection state apart from the icon?
    – J. Dimeo
    Commented Jul 29, 2016 at 13:02
  • If the developers are displaying the SVGs directly, they could actually colorize or otherwise alter the colours as required at runtime, to your specifications. Then you wouldn't need to provide two SVGs for each icon.
    – calum_b
    Commented Jul 29, 2016 at 16:19

7 Answers 7


Just add a grey square around the icon so it looks selected.


download bmml source – Wireframes created with Balsamiq Mockups


Use a colour to represent "selected" and grey scale to represent "unselected". You can do this against a dark background too (as long as the "selected" and "unselected" has enough visual contrast and visual harmony against that darker background)

  • Thanks for the response but this is what we thought at first but the problem is from the development side as developers have to deal with the CSS of each and every icon and each icon itself has at least 3 layers(solid black body, white elements & the shadow shape and there are some icons which contain more than 5 layers) :|
    – Sanshizm
    Commented Jul 29, 2016 at 5:43
  • @Sanchit.Sharma That sounds like a weak excuse. They dealt with the CSS to begin with, right? I'm a developer and it doesn't sound like an unreasonable request to want an "active" state for the icons. Especially if they use a CSS preprocessor. Commented Jul 29, 2016 at 14:46
  • This is starting to look like a "how" implementation question, which is off topic in this User Experience Stack Overflow. However, a good visual designer and good UI developer can solve this one very quickly from an implementation perspective.
    – SteveD
    Commented Jul 29, 2016 at 15:19

Colors for a state reference has always been helpful, when you have nothing other to work with. So better would be background with different shaded border, so it would have to work on any background.

A combination of dark and light shade of single color is handy here in your case.

When you stated:

"One way to do this is by inverting the colors but the issue is we have more than 50 icons overall and from the development perspective we have to provide two SVGs for a single icon to the developers which will make the app heavy."

It reminded me of similar challenge a while back. So this is what i guess will be helpful to you.

enter image description here

enter image description here

Note: The red color(Background+Border) here, has to be replaced by your themes' color.

Thank You!

  • @twelfth I guess you are not interested for the answer anymore.
    – divy3993
    Commented Aug 27, 2016 at 4:24

Suggest using web font instead. It would reduce the load of loading SVG icons AND you can simply color the icons using code.

  • Yeah, this is what I did. I used the icomoon app to make a web font but the only concern was that each and every icon had at least 6 layers which were making the CSS way longer. But yeah this is the best option to make changes.
    – Sanshizm
    Commented Aug 1, 2016 at 12:17

I am providing two options with background color and with linear line for icon selection.

  1. Background color: to keep the grey color icon consistent you can try a background color with little depth which is also suitable for your icons because it has shadows.
  2. Linear line: possibly indicate the selected icon area
  3. for the color option: I am not convinced neither disagree, because I think it breaks the consistency somewhere. Are you using color anywhere in your application which shows that it is selected? If yes, for consistency, you can also consider this options.

enter image description here


You can achieve this by using colors. Depending on the environment/language you are working with. I think you are developing a web-based application. Use the original color of the icon when it's selected else target the unselected icons with class that when they are inactive , their colors would be set to grey. This is the most used technique and it will reduce the cognitive load.


How I see this implemented: The selected icons can have a transparent white background, maybe with a subtle shadow and you can make them a little bigger. In this way, you don't need to worry about the background of the section, the icons are definitively more visible, without change the style a lot.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.