I need to design a UI that includes widgets to control a server computer, and a client computer.

This means I'll be doing similar pairs of icons for mail (mail program vs mail server), web (browser vs apache settings), and so on.

Is there a conventional way to visually distinguish between client and server?

I notice Apple uses a "tray" to indicate a server service, but I'm not sure this would be clear enough for the average user of my program.

Eg: Server:mail service (server) vs Client: mail program (client)

  • Purely from the iconic side of things search google images for client server and you should get plenty of inspiration from terms like cloud / hub / node / centralisation / distribution and appropriate use of arrows or network lines to differentiate either end of the relationship. However, as always, it's best to use text as well to make things clear. Nov 14 '11 at 11:03
  • 1
    Thanks Roger. I've been looking at cilent/server icons for weeks, on Google and elsewhere - to be honest, there doesn't appear to be a standard. However maybe someone familiar with a slightly different field can suggest something that would be similar enough. I would prefer to stick with something whose meaning is immediately recognizable. A database cylinder icon, or tray, does not really convey the message clearly enough
    – username
    Nov 14 '11 at 11:16
  • Could you provide a little more context on the users and the usage? Since the apple tray isn't "clear enough for the average user" you must have some data or at least some opinions on who your users are
    – katDNA
    Nov 14 '11 at 12:39
  • The users will be technical, but without experience configuring servers. The tool on which I am working will help them configure a server to work with a client (choosing appropriate network and account settings, etc). With two sets of settings for several services, it makes things visually confusing. Still, it's important that all settings be visible on the same window (eg: so you can compare the effect of changing DNS service settings on a mail client, etc)
    – username
    Nov 14 '11 at 12:53
  • might go with a "beehive" overlay for server, and a "bee" for client. though this might be more confusing, as bees are associated with "danger" :(
    – username
    Nov 14 '11 at 16:04

The desktop icon is pretty common for client side.
enter image description here

And the server icon is pretty common for server side.
enter image description here

Add some overlay icon, and you've got:

Server side icons:
enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here

Client side icons:
enter image description here enter image description here enter image description here enter image description here enter image description here enter image description here


As you have already pointed out, there isn't any standard for this, so whatever you choose it's going to be new to your customers.

So instead of needing them to learn two sets of icons for each action (one server and one client), I would opt to have them learn two modifier icons that can then be applied to any single icon.

By a modifier, I mean an icon that can act as an overlay to a generic icon. For example, if you opted to make all server icons shown inside a square box and all client ones inside a circle. You could pick almost anything for the modifiers, but I think it would help if they are in some way linked to server or client. Possibly a cloud for everything server related, and some grass under anything client related. That way if you think of server as in the cloud and client as on the ground, the link is easy to remember.


I'm still not sure I "get" your scenario, but how about visually splitting the window in a server-side and a client-side (no pun intended). That way what you have to do is make the 2 sides distinguishable and of course recognizable as representation of client/server

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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