Overview

Beautiful hand-crafted SVG icons by the makers of Tailwind CSS.

This plugin is a small wrapper that makes it easy & straightforward to use these fantastic icons in your bubble app!

Adjust size and colors ✅

Both **solid** and **outline** icon styles ✅

Change background, borders and shadows ✅

Respond to click events ✅

Can be added within native Bubble buttons ✅

Check out https://heroicons.com to find the full set of supported icons & what they looks like!

Installation

Just head over to the link below to install the plugin to your bubble app!

Heroicons Plugin for Bubble, by Minimum Studio

How to use

Add element to page

Start by adding the **Solid Icon** or **Outline Icon** element to the page from the sidebar depending on which style of icons you want to use. There are currently **240** icons to pick from in each set!

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c2a38f03-7d9c-4af6-aac7-e1d25278be49/Screenshot_2021-05-31_at_23.09.12.png

Icon appearance

Change which **Icon** is displayed by selecting an icon from the dropdown. Obviously the color can be changed with **Color**. The rest of the customization options are already provided by bubble!

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0cdad8a6-f162-4190-8847-913ec968832b/plugin.png

Clickable icons

It's also possible to make the icon clickable by checking the **Clickable** property. After checking the box you can set up a workflow to react to the click under the Elements section.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/eff78c7a-6360-4428-af8f-d5a33195cdbf/Screenshot_2021-05-31_at_23.23.19.png

How to use icons in buttons