Emojis as Icons

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

There are lots of unicode symbols that make pretty good icons already, like arrows (←), marks (✘), and objects (✂︎).You can already colorize these like a normal font glyph. Then, there are emojis, those full-color suckers we all know about. What if you could take just the shape of an emoji and use it like a normal glyph? You can!

Preethi Sam shows how:

.icon {
  color: transparent;
  text-shadow: 0 0 #ec2930;
}

Plus, an alternate technique using background-clip. Note that emojis render differently across platforms, so careful!

The original source for this has been moved and redirects to a completely different domain. It has been removed to prevent anyone from landing somewhere fishy.