Iconify Lib
Access 150,000+ icons from 150+ icon sets with single element - customize colors, sizes, rotations, animations, and interactions
5
Rating
12
Installs
v1.0.2
Version
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.
When to Use
Everything you need in a single plugin
Navigation Elements
Home buttons, menu icons, back arrows, and breadcrumbs. Use recognizable navigation icons with click events to create intuitive navigation patterns throughout application.
Action Buttons
Save, edit, delete, share, download actions. Replace text buttons with clear icon buttons for common actions. Enable click events to trigger workflows and use appropriate colors for action types.
Status Indicators
Success checkmarks, error icons, warning signs, info badges. Visual indicators for states and conditions using semantic icon choices and functional colors like green for success, red for error.
Social Media Links
Facebook, Twitter, Instagram, LinkedIn icons. Use official brand icons from Font Awesome Brands set with brand colors for social media links and sharing functionality.
Loading Indicators
Spinning refresh icons, loading spinners during async operations. Use spin animation with loop for progress indication while data loads or operations process.
Form Enhancements
Icons inside input fields showing field type, help icons with tooltips. Enhance form usability by visually indicating field purpose like mail icon for email input.
Feature Highlights
Icons representing features in marketing or product sections. Use relevant icons with shadows alongside feature descriptions to create visual hierarchy and improve scannability.
User Interface Controls
Settings gears, filters, sort controls, view toggles. Icons for UI controls that modify view or settings. Use clickable icons with tooltips describing control function.
Benefits
Everything you need in a single plugin
Massive Library
Access 150,000+ icons from 150+ icon sets without uploading any files. Material Design, Font Awesome, Bootstrap, Heroicons, Feather, and many more all in single element.
Always Updated
Iconify CDN automatically includes new icons from popular sets. Get access to latest icon additions without plugin updates or manual downloads.
Vector Quality
SVG icons stay perfectly crisp at any size on any display density. Scale from tiny 16px to massive 256px without quality loss or pixelation.
Zero Asset Management
No icon files to upload, organize, or maintain. No storage used in Bubble app. Icons load dynamically from CDN only when needed.
Instant Swapping
Change icons by simply changing icon name property. No re-uploading files or updating references. Test different icons rapidly during development.
Lightweight Loading
Only loads SVG data for icons actually used, not entire icon sets. First load fetches from CDN, subsequent loads use browser cache for instant display.
Rich Customization
Control every visual aspect without editing SVG files. Colors, sizes, rotations, flips, shadows, and animations all configurable through properties.
Smooth Animations
CSS-based transitions and spin animations provide polished interactions. Configurable transition timing and rotation speed for perfect feel.
Full Interactivity
Enable click events to trigger Bubble workflows. Icons act as buttons with proper cursor feedback, hover effects, and event handling.
Accessibility Built-In
Proper semantic HTML with role attributes and ARIA labels. Tooltips provide descriptions for screen readers ensuring inclusive experience.
Key Features
Everything you need in a single plugin
150,000+ Icons
Access massive library from 150+ icon sets including Material Design Icons, Font Awesome, Bootstrap Icons, Heroicons, Feather, Lucide, Tabler, and many more. Single element for entire library.
Single Element
Just one Bubble visual element to place icons anywhere in application. No multiple elements or components to manage for different icon sets.
Dynamic Search
Browse and search icons at iconify.design. Copy icon name and paste into Icon Name property. Instant icon swapping without file management.
Color Customization
Set any color using Bubble color picker or hex codes. Change icon color dynamically based on conditions or states for visual feedback.
Scale Control
Resize icons from 10% to 200% of container size. Control exact appearance within element bounds for padding or overflow effects.
Rotation
Rotate icons to any degree from -360° to 360°. Use for directional indicators, transformed orientations, or animated rotation effects.
Flip Transforms
Mirror icons vertically or horizontally. Create variations of directional icons or reversed orientations without separate icon files.
Drop Shadows
Add configurable drop shadows with custom color, offset, and blur radius. Create depth and separation from backgrounds with CSS filter shadows.
Spin Animation
Continuous rotation animation for loading indicators. Control rotation speed and loop behavior. Efficient CSS-based animation for smooth performance.
Click Events
Enable clickable behavior and trigger Bubble workflows when icon clicked. Use icons as buttons with proper cursor feedback and interaction handling.
Smooth Transitions
Configurable transition timing for property changes. Smooth animations when colors, scales, rotations, or other properties update dynamically.
Tooltip Support
Native HTML title attribute for tooltips. Works seamlessly with Nebula Cooltip plugin for enhanced styled tooltips with advanced formatting.
Common Questions
Everything you need to know before installing
How many icons are available?
Over 150,000 icons from 150+ icon sets including Material Design Icons (7,000+), Font Awesome (2,000+), Bootstrap Icons (1,800+), Heroicons (300+), Feather (280+), and many more. Browse complete library at iconify.design.
Do I need to upload icon files?
No, icons load dynamically from Iconify CDN. Simply specify icon name and plugin fetches SVG data on-demand. No file uploads, no asset management, no storage used in Bubble application.
How do I find icon names?
Visit iconify.design to browse and search icons. Click any icon to see details including icon name in format set-prefix:icon-name. Copy icon name and paste into Icon Name property in Bubble editor.
Can I use different icon sets together?
Yes, mix icons from any sets available in Iconify library. Recommended to use icons from same set for visual consistency, but mixing sets intentionally for different contexts works well.
Do icons work offline?
No, icons require internet connection to Iconify CDN for first load. After initial fetch, icons cached by browser for offline use until cache clears. Consider this for offline-first applications.
Can I make icons clickable?
Yes, enable Is Clickable property to make icon act as button. Use "is clicked" event in workflows to respond to clicks. Icon shows pointer cursor and triggers Bubble workflow events.
How do I create loading spinners?
Enable Spin property for continuous rotation. Enable Loop Animation for infinite loop. Set Loop Time to control rotation speed (1000-2000ms recommended). Use conditionally to show only during operations.
Can I animate icon color changes?
Yes, set Transition Time property to add smooth animation when icon color changes dynamically. Useful when changing colors based on conditions or states for visual feedback and polish.
Do icons work on mobile devices?
Yes, icons work on all mobile browsers. Ensure clickable icons have sufficient touch target size (44px × 44px minimum recommended). Icons require network connection for first load from CDN.
How do shadows work?
Enable Icon Shadow property, then configure Shadow Color, Horizontal Offset, Vertical Offset, and Shadow Blur. Uses CSS drop-shadow filter for depth effect. Works on all icon shapes and colors.