# Using your favorite icons as buttons in CSS

**URL:** <https://community.stackerhq.com/t/using-your-favorite-icons-as-buttons-in-css/564>\
**Category:** Tips and Tricks\
**Created:** [January 4, 2023, 4:43pm UTC](https://community.stackerhq.com/t/using-your-favorite-icons-as-buttons-in-css/564 "2023-01-04T16:43:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![boonshin](https://avatars.discourse-cdn.com/v4/letter/b/ecb155/32.png) [@boonshin](https://community.stackerhq.com/u/boonshin)\
**Post date:** [January 4, 2023, 4:43pm UTC](https://community.stackerhq.com/t/using-your-favorite-icons-as-buttons-in-css/564/1 "2023-01-04T16:43:58Z")

</div>

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](http://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/](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](https://yoksel.github.io/url-encoder/).

**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](https://europe1.discourse-cdn.com/flex017/uploads/stacker/original/1X/b12a8a77cb51b71514e7210565b0036b19950d04.gif)  
**After**  
 ![CleanShot 2023-01-03 at 09.56.25](https://europe1.discourse-cdn.com/flex017/uploads/stacker/original/1X/ee4b1872a836f52a4d5a7ce005f6af25030fbe9b.gif)

2. Simulate a priority task checklist action button  
 ![CleanShot 2023-01-03 at 10.01.51](https://europe1.discourse-cdn.com/flex017/uploads/stacker/original/1X/c6e235d6f2c19953bea52e1fb71347162894383d.gif)

---

<div class="post-metadata">

**Author:** ![oli](https://dub1.discourse-cdn.com/flex017/user_avatar/community.stackerhq.com/oli/32/389_2.png) [@oli](https://community.stackerhq.com/u/oli)\
**Post date:** [January 5, 2023, 9:20am UTC](https://community.stackerhq.com/t/using-your-favorite-icons-as-buttons-in-css/564/2 "2023-01-05T09:20:06Z")

</div>

Love it! 🙂 Thank you for sharing!

---

<div class="post-metadata">

**Author:** ![savelozo](https://dub1.discourse-cdn.com/flex017/user_avatar/community.stackerhq.com/savelozo/32/539_2.png) [@savelozo](https://community.stackerhq.com/u/savelozo)\
**Post date:** [February 1, 2023, 3:42pm UTC](https://community.stackerhq.com/t/using-your-favorite-icons-as-buttons-in-css/564/3 "2023-02-01T15:42:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![boonshin](https://avatars.discourse-cdn.com/v4/letter/b/ecb155/32.png) [@boonshin](https://community.stackerhq.com/u/boonshin)\
**Post date:** [February 3, 2023, 11:44pm UTC](https://community.stackerhq.com/t/using-your-favorite-icons-as-buttons-in-css/564/4 "2023-02-03T23:44:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![savelozo](https://dub1.discourse-cdn.com/flex017/user_avatar/community.stackerhq.com/savelozo/32/539_2.png) [@savelozo](https://community.stackerhq.com/u/savelozo)\
**Post date:** [April 5, 2023, 7:57pm UTC](https://community.stackerhq.com/t/using-your-favorite-icons-as-buttons-in-css/564/5 "2023-04-05T19:57:06Z")

</div>

How did you make the pop up not appear? 😬

---

<div class="post-metadata">

**Author:** ![boonshin](https://avatars.discourse-cdn.com/v4/letter/b/ecb155/32.png) [@boonshin](https://community.stackerhq.com/u/boonshin)\
**Post date:** [April 6, 2023, 6:22pm UTC](https://community.stackerhq.com/t/using-your-favorite-icons-as-buttons-in-css/564/6 "2023-04-06T18:22:23Z")

</div>

Currently you can’t but it looks like that’s [being planned on the roadmap](https://stacker.canny.io/)!