🚀 Step 1: Basic Setup
Drag the Icon Toggle element onto your page.

InitialValue (yes/no/empty): Here you'll connect the toggle state to a custom state or a database field (using autobinding).

🎨 Step 2: Choose Your Style

You have two styling options: using icons from a predefined list or custom images.

To use Icons (default): Uncheck the "Use Custom Images" checkbox.

To use your own images: Check the "Use Custom Images" checkbox.

⚙️ Step 3: Customizing Icons

Icons for each state: Use the dropdown menus to select an icon name for each state: Yes Icon, No Icon, and (if enabled) Null Icon.

Colors and Size: Set the colors for each state and adjust the size under the Icon Size option.

🖼️ Step 4: Using Custom Images

Attach your images to the fields: Yes Image, No Image, and Null Image.

Image Size: Specify your image size in pixels in the Image Size field.

🕹️ Step 5: Advanced State Management

Null State (Tri-state): Check "Allow Null State" to enable a third state. The toggle cycle will be: Yes → No → Null → Yes.

Disabled State: Check "Is Disabled" to deactivate clicking. You can set a color (Disabled Color) or an image (Disabled Image) for this state. Great for conditional logic.

💾 Step 7: Using Data in Bubble

Exposed State: The plugin exposes a real-time value called current_value. In workflows, access it via: IconToggle A's current_value. The returned value will be: true (boolean), false (boolean), or null (empty).

Autobinding: To automatically save the value to a 'yes/no' field, Bubble will save: 'Yes' State → yes; 'No' State → no; 'Null' State → empty. Perfect for filters and conditionals!