How to Create and Use Custom Emojis on Your Website

Update: It’s been almost a year since I first wrote this and the basic technique is still the same, but I’ve refined the style rule a little bit and updated my image links.

Including emojis inline with text is very easy to do 😀 because they are basically just text. That’s what they were designed for. But I often find that I’d like to use an emoji that doesn’t exist yet—like the Ohio flag —or an emoji that probably never will exist—like the Southwest Airlines logo .

Here’s How

1. Prepare the image.

   • The image should be square (1:1 aspect ratio) otherwise they'll get squished using the style rules below.
   • I like to use SVG files because they're small and they scale well, but ordinary JPGs or PNGs will work too.
   • If using an raster image format (PNG or JPG) there’s probably not much need for the image to exceed 128×128 pixels (or maybe 256×256). Don’t use gigantic image files!

2. Host the image

   • Upload the image to your favorite hosting platform and note the URL. I use my own CDN but do what works for you.

3. Insert the image into your HTML document using the <img> element and the class property. Here’s an example:

<p>Hello there. Here is some text with
<img src="https://some.place/moo.svg" class="emoji">
an inline emoji.</p>

4. Create CSS style for your custom emoji-like images. I use the class name “emoji.”

img.emoji {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 0;
  vertical-align: middle;
  margin-block-start: calc(1ex - 1cap);
}

To see it in action, take a look at this interactive demo.