This plugin allows you to render beautiful heroicons separately, or in buttons.
⚠️ If you're using icons in buttons and Heroicons 4+ check our migration guide ->
https://heroicons.bubbleapps.io/version-test/migration_guide_v4📢 How to use standalone icons
1️⃣ Add the icon element to your page. There are three styles to choose from. Mini, Solid and Outline. Each style has its own element. Search for Mini, Solid or Outline in the elements tree to find the one you want to use.
2️⃣ Customize the icon to your liking. You can change the size, color, hover state, background, borders and more.
3️⃣ Optionally, add a click listener or tooltip if you need to respond to clicks on the icon.
Check the demo & editor for examples (links below).
📢 How to use icons in buttons
1️⃣ First add a native bubble button to your page.
2️⃣ In the button text, add the special heroicon bracket notation to specify which icon you want to show inside of the button.
[hil]chat-bubble-left[/hil] Chat
[his-b-18]calendar-days[/his-b-18]
[hir]cog-6-tooth[/hir] Settings
Check the demo & editor for examples and a visual explanation of this notation (links below).
⚠️ Warning: Heroicons 1.6 are no longer supported. You must use Heroicons 2.0 names only. Check available icons here ->
https://heroicons.com/⚠️ The native bubble 'is pressed' and 'isn't pressed' states will be ignored on the icons elements.
Demo available here 👉🏽
https://heroicons.bubbleapps.io/version-testView the editor 👉🏽
https://bubble.io/page?name=index&id=heroicons
Built on Bubble
