Build clean, dynamic UIs effortlessly with icons that respond to your data. This all-in-one plugin includes a user-facing Icon Picker element, allowing your users to choose their own icons. It also lets you add truly dynamic icons and icon-enhanced buttons anywhere on your website. It supports thousands of icons from popular libraries (Material Symbols, Material Icons, Phosphor, and Lucide), all kept up to date automatically. Simple to set up, smooth to run, and highly customizable.


What’s included(but not limited to):

• 🔍 Icon Picker – A button element that opens a visual picker for icons. Let your users search and select an icon from a beautifully built-in panel (with categories, search, and previews). Highly customizable look and feel (features, colors, theme). You can get the selected icon’s value to save in your database, or even auto-bind it to a field for instant updates without workflows.
  
• 🎨 Icon Palette – A flexible grid element for displaying a set of icons. Use it to build custom icon selection panels or menus. It can display all icons (or a filtered set) from the libraries in a responsive grid. Supports search and filtering, with smooth scrolling even through large icon sets – perfect for creating an icon library UI on your website.
  
• 💡 Dynamic Icon – A lightweight icon renderer that combines 4 libraries into one element (think of it as an “Ultimate Icon” element). Bind its icon source to dynamic expressions (for example, a thing’s field or an option set value) to switch icons at runtime. You can also define icon rotation direction, speed, or set a static angle. Control the icon’s appearance easily – size, color, weight/style (e.g. light, regular, bold), and alignment – all through properties or conditions. This element works anywhere (inside repeating groups, popups, etc.) without extra conditions.
  
• ⭐ Dynamic Button – An enhanced button element with first-class icon support. It works like Bubble’s standard button, but with an Icon property that can be static or dynamic. Easily place an icon to the left/right or even over/under the text (or use an icon-only button with no text). You can define the icon by a dynamic expression (e.g., change icon based on user role or an action), and adjust the button style variants (sizes, rotation, outline/solid, rounded corners, etc.) just like a normal button. Great for action buttons that need to show different icons under different conditions. 
  

Key benefits:

• Truly dynamic icons: Drive icon choices from your database Things or Option sets, enabling icons that change based on user data or conditions – without cumbersome workarounds. For example, show a different icon for each category or user status by simply binding the value.
  
• User-friendly selection: Provide a beautiful in-site icon picking experience to your end users. They can visually browse and search icons instead of guessing names or being stuck with static choices, allowing them to personalize content with icons easily.
  
• Consistent styling: Maintain a uniform look for all your icons and icon-buttons. Define shared sizes, colors, and weights so that icons from different libraries still look consistent together. No more mix-and-match inconsistencies – your Material and Phosphor icons can seamlessly share the same style.
  
• High performance: This plugin is built for speed. It uses optimized techniques (like virtualized lists) to handle thousands of icons efficiently. Even in complex pages or long repeating groups, icons load quickly and scrolling remains smooth, keeping your app snappy.
  
• Always up-to-date: You’ll have access to 7,000+ icons from four leading libraries, with new icons added automatically as libraries update. There’s no need for you to manually import icon files or maintain long option sets of icon choices – it’s all managed for you.
  

Typical uses:

• Custom icon selection by users: e.g., allow users to pick an icon for their profile, for categories/tags they create, or for labeling projects. The Icon Picker makes it a breeze to implement a user-facing icon chooser.
  
• Context-aware action buttons: Buttons that change icon based on state – for example, a toggle that shows a ★ when something is “favorited” and ☆ when not, or a “play/pause” button that switches icons dynamically.
  
• Progress and loading states: Keep users engaged and informed during waits by showing smooth, customizable loading animations with icons.
  
• Dynamic status indicators: Use the Dynamic Icon element to display different icons for different data values. For instance, show file type icons next to filenames (PDF, DOC, image, etc.), or user role badges (admin, member, guest) determined by a field in the database.
  
• Icon-rich repeating lists and dashboards: Build dashboards or menus with lots of icons (e.g., a list of features each with an icon, or a sidebar menu with icons). The Dynamic Icon element can repeat based on your data source, ensuring all icons share the same styling and load efficiently.
  

Live demo:
👉 Open the live demo to see interactive examples of the Icon Picker, Icon Palette, Dynamic Button, and Dynamic Icon in action.

Editor:
🛠️ Discover how to select icons, switch them using data, and maintain consistent styles effortlessly.



Related plugins:

• Dynamic Button + Icon – If you only need the dynamic icon and button features without the icon picker, check out this lighter plugin: Dynamic Button + Dynamic Icon (offers just the two elements at a lower price).
  
• Dynamic Icons Renderer (Free) – For basic use-cases where you just want to display dynamic icons (no picking or button element), we offer a free plugin: Dynamic Icons Renderer (Free Bundle). Great for trying out dynamic icons on your website.