Iconify Lib
8
Overview The Nebula – Iconify Animated Icon is an advanced icon element that transforms any Iconify icon into a fully customizable component inside Bubble. It gives you complete visual control — size, color, rotation, flip, scale, shadows, and smooth spin animations — all rendered with native performance.
Perfect for menus, dashboards, buttons, status indicators, and modern interfaces that rely on dynamic, interactive icons.
How It Works
Automatic Rendering: simply provide any Iconify icon name and it renders instantly.
Fully Responsive: the icon automatically adapts to the exact dimensions of the Bubble element, respecting width, height, and borders.
Advanced Transformations: apply rotation, horizontal/vertical flip, and scaling with smooth transitions.
Smart Animations: enable continuous spin, configure loop duration, and control animation behavior via properties.
Realistic Shadows: customize shadow color, blur, and offsets using native drop-shadow rendering.
Click Behavior: choose whether the click event is handled by the element itself or by its parent container.
When to Use
Replacing static PNG/SVG icons with dynamic, scalable alternatives.
SaaS dashboards and applications that require responsive, interactive icons.
Building animated loaders, action buttons, or visual status indicators.
Standardizing your icon system using a single Iconify-based library.
Benefits
Avoids mixing different icon packs — everything comes from Iconify.
Eliminates the need for CSS hacks for simple animations.
Keeps your UI consistent across all screen sizes.
Fully compatible with Bubble workflows and conditional logic.
Lightweight, fast, and natively responsive.
Key Features
Supports any Iconify icon by name (ph:, mdi:, material-symbols:, etc.).
Full transformations: rotation, X/Y flip, and scaling with automatic safety limits.
Configurable spin with optional looping and adjustable timings.
Smooth transitions defined in milliseconds.
Customizable drop-shadow with color, offset, and blur control.
Smart click handling with optional parent delegation.
Responsive resizing based on the actual Bubble element dimensions.
Usage Guide 1. Installation
Install the Nebula – Iconify Animated Icon plugin in the Bubble Plugin tab.
Drag the plugin element onto the page where you want the icon to appear.
Set the width, height, and borders directly in the Bubble editor.
2. Core Properties
Icon Name (text): The Iconify identifier (e.g., mdi:home, ph:gear-duotone).
Icon Color (color): Sets the icon color using Bubble’s color picker.
Tooltip (text): Optional title used for the browser’s native tooltip.
Is Clickable? (yes/no): Enables pointer cursor and clickable behavior.
3. Visual Transformations
Flip Vertical (yes/no): Flips the icon on the X-axis.
Flip Horizontal (yes/no): Flips the icon on the Y-axis.
Scale (%) (number): Scales the icon relative to its container (safely limited between 10% and 100%).
Rotation (degrees): Rotates the icon (0, 45, 90, 180, etc.).
Transition (ms): Duration of transformation transitions in milliseconds (e.g., 150, 300, 500).
4. Animations
Spin Enabled (yes/no): Activates the spinning animation.
Loop Animation (yes/no): When used with spin, continuously restarts the rotation.
Loop Time (ms): Duration of each spin cycle. If empty, an internal default is used.
5. Shadow Settings
Shadow Enabled (yes/no): Toggles drop-shadow rendering.
Shadow Color (color): Color of the shadow.
Horizontal Offset (px): X-offset of the shadow.
Vertical Offset (px): Y-offset of the shadow.
Shadow Blur (px): Blur radius for softer, more natural shadows.
6. Best Practices
Use a single Iconify family (e.g., ph:) to keep your design system consistent.
Choose moderate animation speeds for a refined, professional look.
Prefer adjusting scale_percent instead of resizing the element for predictable layouts.
Use subtle shadows (small offsets, higher blur) for cleaner aesthetics.
If the icon sits inside a clickable group, enable click_event_handled_by_parent to avoid conflicts.
7. Example Use Cases
Animated Loader: enable spin_enabled, set loop_animation to yes, and use a short loop_time_ms (800–1200 ms).
Action Button Icon: set clickable = yes, choose a highlight color, and attach workflows to the icon or parent group.
Status Indicator: change icon_name and icon_color based on state (success, warning, error).
Interactive Cards: combine shadow, transitions, and scale_percent for smooth hover-like interactions.