Add truly dynamic icons to your Bubble app and keep them consistent, without any bloat. This lightweight plugin gives you two fundamental UI elements – a Dynamic Icon and a Dynamic Button – to build icon-driven interfaces that react to your data. Bind icons to dynamic expressions (from your database or Option sets) instead of static choices, and ensure a uniform style across 4 popular icon libraries (Material Symbols, Material Icons, Phosphor, and Lucide). It’s simple to set up, efficient even on large pages, and even supports rotation.

What elements do you get:

• ⭐ Dynamic – Button – A drop-in replacement for Bubble’s button, with built-in icon support. You can place an icon on the left/right of the text(over/under), or even use an icon-only button. Choose an icon from the libraries or bind it dynamically (e.g., “Current User’s role’s icon” or any condition). All properties can be controlled via dynamic expressions or conditions – icon, label, colors, etc. This element eliminates the need for extra conditions to swap out icons; the icon will update automatically when the underlying data changes.
  
• 💡 Dynamic – Icon – A visual element to display any icon on your page, using any of the four libraries. Use it anywhere you need an icon: inside repeating groups, headers, buttons, or status displays. Set its icon by picking from a list or by using a dynamic value (like an option set field or thing’s field that stores an icon name/reference). You can easily adjust the icon’s size, color, and style (e.g., switch between filled or two-tone versions) through the element’s properties. The Dynamic Icon element ensures your icons are rendered sharply as SVGs and stay in sync with your data without extra workflows.
  

Key benefits:

• Dynamic by design: These elements are built to work with dynamic data. No more static, hard-coded icons – you can tie icon choices to your database or option sets so they automatically update as your data changes.
  
• Unified look and feel: Maintain a consistent style for icons across your entire app. You can use a shared set of sizing and styling options so that whether an icon comes from Material or Phosphor, it matches the same theme (for example, all your icons can have the same color or stroke weight to fit your design).
  
• Fewer workflows & conditions: Simplify your app logic. Instead of creating multiple conditional states or extra workflow actions to swap an icon (say, changing a button’s icon when a user likes something), just bind the icon property to the dynamic value. This reduces the need for complex conditionals and makes your editor cleaner.
  
• Lightweight and fast: The plugin is optimized for performance. You can safely use lots of dynamic icons, even in long repeating lists or heavy pages, without worrying about lag. Under the hood, it efficiently loads the needed icons from the library, so your pages stay fast.
  
• Engaging motion effects: Bring life to your UI with animated icons. You can add smooth rotations or set fixed angles to highlight status, draw attention, or signal ongoing activity without extra workflows.
  
• Always current icons: The plugin includes automatic updates to the icon libraries. As new icons are released in Material, Phosphor, Lucide, or Material Symbols, the plugin will update – you get access to the latest icons without doing anything. No need to manually import or update the plugin.
  

Typical uses:

• Action buttons with context-aware icons: e.g., a “favorite” button that shows a filled star ⭐ when an item is favorited and an outline star ☆ when not, using a single Dynamic Button whose icon source is a condition or user data.
  
• State indicators that reflect data: For example, next to a filename, you show an icon that matches the file type (PDF, image, video, etc.), or next to a user, you show an icon for their role or status. Store the icon name in your data and bind it to a Dynamic Icon element to display automatically.
  
• Repeating groups or menus with uniform icons: Use Dynamic Icon inside a repeating group to display an icon for each item (like a list of categories with their icons, or a feature list). All icons will share the same styling and load quickly, which keeps your UI consistent and professional without extra effort.
  
• Progress and loading states: Keep users engaged and informed during waits by showing smooth, customizable loading animations with icons.
  

Live demo:
👉 Open the demo for Dynamic Button + Dynamic Icon to see these elements in action. The demo showcases buttons and icons changing based on different conditions and data, illustrating how easy it is to implement dynamic icons in your app.

Editor:
🛠️ Check how to use all available properties and states.

Related plugins:

• All-in-One (Icon Picker + More) – Need a user-facing icon picker or a larger icon toolkit? Check out the pro version: Dynamic Icon Picker + Icons Renderer (All in One). It includes everything in this plugin plus an Icon Picker element and Icon Palette for in-app icon selection (ideal if you want users to choose icons).
  
• Dynamic Icons Renderer (Free) – Just want to display some icons dynamically and nothing else? Try the free version: Dynamic Icons Renderer (Free Bundle). It allows you to render icons from the same libraries at no cost (with a more basic feature set).