I've been working for a while on a webphone app for a client. It is a hidden component which slides-out when you click on an icon positioned at the edge of the screen.

Here's the icon:

It became apparent, once it was working and I had deployed it to the server, and brought it into the main app via an iframe, that on the home dashboard it was working fine, but on other pages, the icon was obscuring some of the functionality.

So, there was nothing to it but making it smaller.

Which faced me with a tough choice. The little, faux, led lamp served as a visual hint for the user to remind them to open the app one time, to activate it. A restriction we needed to build-in, to deal with browser issues of loading an already connected app that uses the microphone. This way, the app loads as disconnected, and only registers with the phone service once you open it one time. If it's not registered, you can neither make nor receive browser-to-browser calls.

And, no matter how small the icon needed to get, I really wanted to save that little lamp.

After a lot of thinking, I got radical and considered whether the icon should go instead. I made the lamp bigger, yet smaller than the old icon, and then took the phone image, made it smaller, and white, and planted it right in the middle.

Not registered:

Registered:

Sometimes you can have your cake, and eat it.