[FREE PLUGIN] Icons that work inside native bubble buttons

Hey all!

A while ago we published the (free) heroicons plugin → [FREE PLUGIN] Heroicons, by the makers of Tailwindcss

As of yesterday we published an update that lets you use the icons within native bubble buttons, similarly to how feather icons work in text.

FD7YHz7X0AQNGP9

They work perfectly in both the ‘old’ and new responsive engine. If you want to know more:

Docs → Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

Demo → https://minimum-studio.bubbleapps.io/heroicons

Download → https://minimum-studio.bubbleapps.io/heroicons

More free plugins in the future → Plugins for visual developers | Minimum Studio

9 Likes

Useful plugin. Doesn’t work on the demo page.

3 Likes

hey @shpak.serhiy yeah there seems to be a loading bug somehwere, the interns are looking at it when they have a little time in the coming days :slight_smile:

does it work with text elements? also how do you differentiate between outline icons and solid icons?

This is great! I can start to use button elements again.

Do any of the icons spin? Similar to how font awesome icons (a handful of them) can spin to replicate a loader.

love this plugin, but it amazes me that there isn’t something simple for a loading button. Either a spinner or the button colour looks like a progress bar. This is an example i’ve found jQuery LoadingStateButtons Plugin Demos

2 Likes

Hey,

Can this plugin be extended to get icons inside Text elements as well?

e.g. [hil]star[/hil] this is a text and not a button element

Thanks
ZubairLK

Hi all - enjoying using these in buttons, but do you know if it’s possible to customize the 8px of margin that get inserted automatically to the left or right of the icon? It doesn’t look right for small buttons.

For instance, in this button, the + and the Add are so far apart that it doesn’t look right.

image

Using the element inspector from my browser, you can see there are 8px inserted there by default:

image

@ZubairLK
Use this inside your text element:
https://pastebin.com/PisFvLdK

chrome_qAIv0GWOxW

@jacob.b.singer
.svg {margin:0px,0px,0px,0px!important}

2 Likes