Skip to main content

How to Use Emoji as Icons on Web Pages?

Recently I wanted to create a new website. Getting icons is quite difficult for a backend developer who doesn't know how to slice images, so I thought I'd just use emojis.

Create a favicon.svg file and paste the following code​

<svg xmlns="http://www.w3.org/2000/svg">
    <text y="32" font-size="32">🥷🏻</text>
</svg>

Then use it just like a regular favicon.svg! It's that simple. Result:

Use the following code in the header​

This also works, found on this website: css-tricks.com

<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎯</text></svg>">