2

A commonly recognised share icon looks like this:

Share Icon

I'm guessing there must be (surely) a Unicode symbol out there for this, but so far - despite pretty thorough searching - I've come up empty-handed.

I note that the approved list of new emojis for 2020 include:

  • a dodo
  • a rollerboot
  • a rainbow piñata

I'm concluding it's unlikely that Unicode would have got as far as approving these but not yet approving a share icon.

What's the Unicode for the share icon above, please?

Or do I need to use SVG, instead?

7
  • 1
    I am not aware of an existing one, nor could I find one. You may go ahead and submit it! – Éric May 24 '20 at 13:17
  • 1
    There are some nice public domain SVG easily available. You may want to minifiy them before using in a production environment (I tested and got a 44% reduction in size). – Éric May 24 '20 at 13:44
  • 1
    Thanks, @Éric. I'll probably use this one: Share Icon 2 - it's 721 bytes. – Rounin May 24 '20 at 13:50
  • 1
    U+2056 is three dots but without any connecting lines: ⁖ – Stephen Ostermiller May 24 '20 at 13:55
  • Ah, that's helpful, @StephenOstermiller, thank you. – Rounin May 24 '20 at 13:56
2

While the share symbol is not in the Unicode range, maybe this workaround will help you: http://jsfiddle.net/chillybang/a7v5obqj/

HTML

<span class="share">&lt;</span>

CSS

.share {
    font-weight: bold;
    position: relative;
}
.share:before {
    content: ".";
    font-size: 2.2em;
    position: absolute;
    bottom: -2.5px;
    left: -4px;
}
.share:after {
    content: ":";
    font-size: 2em;
    position: absolute;
    bottom: -6px;
    right: -7px;
}
3
  • Thanks, @Evgeniy - I also saw that jsFiddle before posting my question at the top. I agree that it's an adventurous attempt, but it's too unreliable. I don't know if it does look like a share icon in any other mobile or desktop browser, but in Firefox Desktop, the positioning of the left-hand dot is off. – Rounin May 25 '20 at 13:43
  • 1
    if you really need this as icon, try an iconfont. My personal favorit is materialdesignicons.com/icon/share-variant – Evgeniy May 25 '20 at 15:41
  • Thanks @Evgeniy, that's cool. I'm probably going to stick with Share Icon 2. – Rounin May 25 '20 at 16:16
1

Its a hack, but it works

<span style="transform: rotate(90deg);">V</span>
1
  • Thanks, @Justin. Is this a new unicode symbol? Only, I can't find it anywhere - and I can't get it to show up in a CSS ::before pseudo-element, either. Thanks. – Rounin Mar 4 at 11:07

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.