Using your favorite icons as buttons in CSS

I find that using an icon is sometimes better than text or emoji in an action button. To my delight, you can use SVG data in CSS which means you can use your favorite icon. Here’s one way to do it:

1. Get the HTML code for the SVG icon
Go to an icons website like icons8.com, find your favorite icon and look for the option to get the HTML code for a SVG embed. If you already have your own svg icon, you can use a website like https://editsvgcode.com/ to get the HTML code for the SVG embed.

2. Generate URL encoded data
Generate the URL encoded data by pasting the HTML code in a website encoder like the following URL-encoder for SVG.

3. Apply it to your CSS
Copy the encoded data and put it in your CSS by doing the following:
content: url("data:image/svg+xml, <ENCODED DATA GOES HERE>");

Here are examples of what you can then do. The first is an easy replacement, while the second is more involved.

  1. Open a weblink
    Before: Using an emoji as the name of the button link
    CleanShot 2023-01-03 at 09.44.36
    After
    CleanShot 2023-01-03 at 09.56.25

  2. Simulate a priority task checklist action button
    CleanShot 2023-01-03 at 10.01.51

4 Likes

Love it! :slight_smile: Thank you for sharing!

1 Like