61

Every site uses a different share icon here are some examples: share icons examples Which icon is best for UX and most obvious to the user that it is a share icon?

Improve this question
4
  • 9
    See also: ux.stackexchange.com/questions/71779/…
    – Bob
    May 24, 2016 at 5:23
  • 2
    Definitely one of the first three, the others are much less common, but the third is more regularly used for "social sharing".
    – Tim Malone
    May 24, 2016 at 7:48
  • 5
    Relevant xkcd xkcd.com/927
    – ProWolf
    May 24, 2016 at 11:40
  • The trick is that "share" isn't just something you do with your computer, it's something you do with other people. This makes it relatively unique amongst common computer actions. Even "send" is something you do with your email, not something you do with the recipient. An icon of a stick figure talking to another stick figure, or pointing something out to another stick figure, would probably be the most intuitive...but very hard to make small and recognizable.
    – Wildcard
    May 25, 2016 at 4:35

3 Answers 3

Reset to default
47

Other than just being design choices made by different companies (and the trademarks/copyrights that come with them) you must take into account what the icons are intended to represent. A good icon should denote its meaning without any supplemental text (although you should still have it). An icon that denotes an action such as "share" should represent that action using its perceived motion. Without looking into what each icon there actually stands for here is what I as a "new user" would think they would represent:

enter image description here

  1. Exporting (looks as if the data is leaving the client such as to a server)
  2. Exporting
  3. One-to-Many sharing (One node is sharing the data with others in a one-way flow)
  4. One-to-Many sharing
  5. Peer-to-Peer sharing (sharing is one to one but in a symbiotic full circle flow)
  6. Gifting (implies the object has a value as opposed to just a file, stimulates emotion)
  7. Not sure, perhaps that the data is more stationary and the users come and go to it such as a git repository?

So as you can see different icons represent (at least to me) different things and thus are used in different places, pick the one that fits your situation the closest.

Improve this answer
12
  • 64
    Last one is a hand giving and a hand receiving
    – Devin
    May 24, 2016 at 1:24
  • 33
    @Devin, I'm certain I could have stared at it for days and never would have figured that out. Also, I have to make a concious effort to see number 3 as "sharing" instead of a coupling rod, every time I see it.
    – Celos
    May 24, 2016 at 6:52
  • 3
    7 is the "Open Share" icon, a conscious effort to design an icon that everyone understood as 'sharing' - As Devin says it's two hands, one passing an object to another. en.wikipedia.org/wiki/Share_icon#Open_Share_Icon
    – Roux Martin
    May 24, 2016 at 7:52
  • 60
    They are obviously: 2. Open secret Trapdoor 3. Change to molecular-mode 4. Big houses on a small planet 5. Activate sharingan 6. Receive a gift 7. Evil robot eye
    – Falco
    May 24, 2016 at 9:57
  • 20
    The last icon (7) is obviously Goku preparing one of his Kamehameha attacks.
    – Duroth
    May 24, 2016 at 11:08
34

Branding.

Nothing else.

We could go on and on for hours throwing conjectures and theories, but in the end, it's only a branding thing.

Your icons , from left to right are from Apple, Apple, ShareThis, Android, Windows, Windows and the Open Share Project. Exception made of the last one, they all belong to companies that won't give up on their efforts to brand their apps as they want, hopefully establishing the standard.

Now, if you want to know which one is the most popular and "safe", then the ShareThis one is the most popular and easy to distinguish by users*, which has a very easy to explain logic: while a bit cryptic, it has been used in so many sites through the years that anyone who surfed the web for at least a few months has been exposed to it thousands of times, while all the other icons are "device based" so people not having the specific device won't understand the symbolism.

As an example, in our research we noticed a bias towards your first icon on Mac users, while most Windows and Linux users thought it was an upload icon. Normalized data shown that the only icon everybody recognized as a "share" icon was the "3 dots" by ShareThis. However, the open source community is trying to give more exposure to the Open Share icon, so maybe this will change in a not so distant future

  • (note: based on our own research, which didn't include the last 3 in your list by the time we did it, but I'm sure many people here did the same research since it's an obvious thing to do, so expect more results that might or might not be like ours)
Improve this answer
12
  • 1
    This is a valid point but seems to be a vast over simplification. Designers have reasons for the differences beyond "we want to be different" as seen by the common use of other symbols
    – Zach Saucier
    May 24, 2016 at 1:46
  • 2
    You're welcome to add your own answer . If you have another explanation other than branding (which explain why the most common icon is also the logo of that company and one of the reasosn why Open Share was created), feel free to add it as an answer so we all can learn, that's what this site is about
    – Devin
    May 24, 2016 at 2:07
  • 2
    I agree that's what the site is about but don't have my own answer much apart from what has been said in the other answer. I was simply commenting with my opinion of your opinion :)
    – Zach Saucier
    May 24, 2016 at 2:13
  • 2
    Also, if these designers you talk about are doing things different for other reasons, then it means they found other icons (such as the most popular one) don't work. And yet, the older one of this set is the most known and effective and nothing these designers did (for whatever reasons) solved this problem at all. I suggest you do some research and see the results by yourself
    – Devin
    May 24, 2016 at 2:13
  • 1
    +1 for branding. -0.1 for disclosing results of an unpublished (or at least unreferenced) survey.
    – yo'
    May 25, 2016 at 6:51
16

According to this article, a standard well accepted share icon does not exist :

It is unlikely that we will see a convergence to a single share symbol. Apple will not start using Android's design language, Google is not going to implement Microsoft's design, nor is Microsoft going to use another platform's share icons. Since each of the big three OS companies has huge device market share, users will likely interact with at least three different types of symbols that represent the same action.

If you want to have an icon that is understood by almost everybody use one of the following options :

  1. Use a symbol with a label. I find the Y symbol the most intuitive and the most wide spread. Add to that symbol the label "Share"

enter image description here

  1. Create a group of icons with the bigest networks, and then add a three dots icon for the rest of the networks :

enter image description here

  1. Use only the word "Share". Make it blue and underlined so that users will know that label is clickable.

enter image description here

EDIT:

According to the comments a button is more appropriate than the link style above, which I tend to agree :

enter image description here

Improve this answer
7
  • -1 (if I could). I don't see how anybody can upvote an answer with "blue and underlined" as a recommendation for link styling. Where are we, the Nineties?
    – Johannes Pille
    May 24, 2016 at 12:37
  • 7
    @JohannesPille I think blue and underlined is a fine link style if your goal is to be as clear as possible, although I would never use #0000FF as the blue color.
    – Era
    May 24, 2016 at 13:56
  • 9
    @JohannesPille Blue underline links remain a recognised convention, and it remains unclear if the trend away from it is a good or bad thing. See also ux.stackexchange.com/q/7064/27843 and ux.stackexchange.com/q/2278/27843
    – IMSoP
    May 24, 2016 at 13:58
  • 2
    On the other hand, the "Share" here is not really a link (i.e. a navigation to a new piece of content) but an action. As such, the most appropriate "classic" UI element might be some form of button, e.g. a rectangular frame with some form of 3D effect.
    – IMSoP
    May 24, 2016 at 14:00
  • @IMSoP, fair enuff. By that reasoning any web UX/UI question can be answered with a link to normalize.css. User Agent Stylesheet for the win...
    – Johannes Pille
    May 24, 2016 at 14:09

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