[FREE PLUGIN] Icons that work inside native bubble buttons

[Kayami]

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.

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

[shpak.serhiy]

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

[Kayami]

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

[adunniola]

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

[boston85719]

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.

[MattDot]

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

[ZubairLK]

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

[jacob.b.singer]

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.

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

[GhostCodes]

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

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