Emoji.svg

About

This is a template that lets you make an svg out of emoji. You may want to use emoji where image is needed but emoji is not an image — it is text. This template will help you in this situation.

Guide

The code

<svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'>
  <text x='9' y='14.5' text-anchor='middle'>😀</text>
</svg>

The result

The resulting image looks exactly the same as the source emoji because it uses text node with emoji inside. Also it means that image will be broken on systems that doesn't support given emoji so be careful with this.

Data-url

You can use it inside data-url to use an image without having one on a file system.

<link
  rel="icon"
  type="image/svg+xml"
  href="data:image/svg+xml,&lt;svg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'>&lt;text x='9' y='14.5' text-anchor='middle'>😀&lt;/text>&lt;/svg>"
>

Please check the code above befor copying it — it doesn't work in all browsers (yet?). I use it for stuff that I make for myself so I am sure that it wouldn't make someone unhappy.