Using your favorite icons as buttons in CSS

Tips and Tricks
1

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
2

Love it! :slight_smile: Thank you for sharing!

1 Like
3

How did you do the second case? When do the buttons change?

4

For the second case, there are 2 Stacker action buttons, check and uncheck which have conditionals on when to appear.

Thereafter it’s just styling the check and uncheck button, including the hover states using CSS with svg content.

1 Like
5

How did you make the pop up not appear? :grimacing:

6

Currently you can’t but it looks like that’s being planned on the roadmap!