: Icon to represent "usable offline" I have two versions of my application: online: Requires Internet connection to function properly offline: Can be used offline, for instance in the plane QUESTION:

@Debbie163

I think your idea of the book icon vs power button isn't bad. You could probably find something a bit simpler and easy to recognize at small size using the same concept.

My first idea was to use a battery for offline, even though it's used for power. On a website or app, it could make sense since everybody knows the laptop or device is unplugged when they see the battery icon. So maybe you can use that idea too.

And as other examples, I found these icons:



You could use a laptop icon and maybe move the connection symbol in and out of it to mean it's online of offline. Or similar symbol and simply add the well known connection symbol or a electric plug symbol.

You could use different colors code as well to add more emphasis on the connection part of your icon; for example the connection part could be pale gray when offline, and colored when online.

People get used to these symbols, no matter what you'll choose. As long it's visible at small sizes.



PS: I didn't draw these icons, you'll need to purchase them or do your own version if you want to use them. Most of them are low resolution files from stock image sites, and some were modified slightly.

Vote Up Vote Down

@Odierno310

Taking the line very literally. I don't think these are particularly convincing but perhaps it's food for thought.

Vote Up Vote Down

@Mendez620

The icons need to be contextual to your base use-case and the platform. Assuming the platform is a mobile-device and imagining a user-centric kiosk app, I would use variations on a theme:


An offline kiosk-user icon:
And a wifi-required icon:


I would keep the message clear by modifying no less than 33% of the icon to indicate the difference, but no more than 50% to preserve continuity. Adding color would help, but if the requirement includes section 508 accessibility, color is a nominal factor.

Vote Up Vote Down

@Megan533

guess what. I have a brilliant idea.

Draw the following text as icons:
"Online Version" and "Offline Version".

Tada, problem solved. Please upvote.

Vote Up Vote Down