Lordicon
Add Lordicon animated icons to Webflow with customizable triggers, colors, and animation behaviors.
How to integrate Lordicon with Webflow
Animated icons guide users through complex workflows, highlight interactive elements, and provide immediate visual feedback for user actions. Adding Lordicon animations to Webflow sites creates clearer navigation patterns, faster onboarding completion, and stronger visual confirmation during form interactions.
Webflow's native Lottie animation element handles most implementation scenarios without custom code. For advanced customization, Lordicon's custom element method provides JavaScript control over animation properties. The iframe embed method works for rapid prototyping but lacks production-ready performance characteristics.
Use Webflow's native Lottie animation element
Webflow's Lottie animation element accepts JSON files exported from Lordicon, converting them into responsive animations without custom code. This method works for marketing pages, product interfaces, and content sections that require visual feedback.
Select an icon from Lordicon's library, download the Lottie JSON file, and upload it through Webflow's asset panel. Drag the Lottie element onto your canvas and configure playback settings through the element panel.
This method provides the following capabilities:
- Responsive sizing: Scale icons automatically across breakpoints using Webflow's sizing controls
- Interaction triggers: Connect animations to hover, click, or scroll interactions through the Interactions panel
- Loop controls: Set animations to play once, loop continuously, or play on specific user actions
- Color customization: Modify icon colors by downloading customized JSON files from Lordicon before upload
Lottie files load as structured JSON data rather than video formats, resulting in smaller file sizes. Animations render as vector graphics for sharp display on high-resolution screens without file size increases.
Webflow supports Lottie files up to 30MB but recommends keeping files under 1MB for better performance. Animations with many layers or effects increase file size. Test your animations on throttled connections to verify they load within your performance budget.
Add Lordicon custom elements with JavaScript
The Lordicon custom element method uses <lord-icon> tags with JavaScript configuration for scenarios requiring programmatic control over animation properties. This approach enables dynamic color changes, runtime trigger modifications, and integration with custom JavaScript applications. Lordicon's web documentation describes the complete element API and configuration options.
Add the Lordicon JavaScript library through Webflow's custom code sections, then insert <lord-icon> elements using Code Embed elements or custom code blocks. This method provides access to JavaScript methods for controlling playback, responding to animation events, and updating icon properties based on user interactions.
This implementation provides the following capabilities:
- JavaScript API access: Control animation playback programmatically through methods documented in Lordicon's web API
- Event listeners: Respond to animation state changes through event listeners
- Dynamic properties: Update colors, stroke thickness, and animation speed through JavaScript without page reloads
- CDN delivery: Load icon files directly from Lordicon's CDN using icon reference codes
This method works best when building interactive applications that require animation state synchronization with application logic. Examples include progress indicators that animate based on form completion, status icons that change based on API responses, or dashboard elements that respond to real-time data updates.
Add the Lordicon library script in Site settings > Custom code > Head code section. Insert individual icon elements through Code Embed components positioned where icons should appear in your layout. This method requires a paid Webflow site plan and technical knowledge of JavaScript.
Embed icons using HTML iframe method
The iframe embed method provides rapid prototyping capabilities for testing icon placement and animation behavior before implementing production solutions. Lordicon generates iframe embed codes through their icon detail pages, which you add to Webflow using HTML embed elements. This approach requires no JavaScript configuration but offers limited customization options.
Copy the iframe code from any icon's detail page on Lordicon, then paste it into an HTML embed element in Webflow. The iframe method works for initial design validation and client previews but lacks the performance characteristics and responsive control of native methods.
This method has the following limitations:
- Fixed sizing that doesn't respond to Webflow's breakpoint system
- Additional HTTP requests for each iframe instance
- Limited interaction integration with Webflow's animation tools
- No access to color or property customization after embed
Use this method only for temporary implementations or proof-of-concept testing. Transition to the native Lottie method or custom element approach for production deployments to maintain performance standards and responsive behavior.
What you can build
Integrating Lordicon with Webflow creates interactive visual experiences that guide users through complex processes, highlight key features, and provide immediate feedback for user actions.
- Onboarding sequences: Add scroll-triggered animated icons that guide users through features step-by-step using Webflow's scroll interactions with Lottie elements
- Conversion micro-interactions: Add hover-triggered animations to call-to-action buttons and form elements using Webflow's native hover interactions combined with Lottie animations
- Feature comparison matrices: Build product comparison interfaces where animated icons activate on scroll or hover to emphasize differentiating capabilities and direct attention within information-dense layouts
Frequently asked questions
While not explicitly documented by Lordicon, you can add Lordicon animations to CMS collection items using standard Webflow CMS techniques for dynamic content. Create a plain text field in your collection to store the asset URL from Lottie JSON files uploaded to Webflow's asset manager, then reference those URLs through CMS fields in Lottie animation elements bound to collection items. This approach works for blog post headers, product feature lists, or any repeating content structure that benefits from animated icons.
The Webflow Lottie documentation explains how to bind dynamic data to Lottie elements. Upload your Lordicon JSON files to the asset manager, copy the file URLs, and paste them into the appropriate CMS entries. Each collection item can reference different animation files, enabling varied visual treatments across content types.
For larger icon libraries, consider creating a dedicated CMS collection for animations themselves. Store the JSON file URL, icon name, and category in collection fields, then reference this animation collection from other collections through reference fields.
Customize icon colors through Lordicon's online editor before downloading JSON files for Webflow integration. Access the color controls on any icon detail page in Lordicon's icon library, adjust primary and secondary colors using hex codes or color pickers, then download the customized Lottie file. This method ensures color modifications embed directly in the animation data.
Lordicon's benefits documentation confirms that color customization includes primary fills, secondary accents, and stroke colors depending on the icon style. Upload the customized JSON file to Webflow's asset manager and use it exactly like standard Lordicon files.
For runtime color changes based on user interactions or application state, use the custom element method with JavaScript. Lordicon's web documentation describes the
colorsproperty API that enables programmatic color updates without re-downloading animation files.Using standard Webflow Interactions 2.0 features with Lottie elements, Lordicon animations support hover, click, scroll, and page load triggers. When using Webflow's Lottie element, configure triggers through the Interactions panel by creating new interactions that control animation playback.
For the custom element method, Lordicon provides built-in trigger attributes for hover, click, and loop behaviors that you add directly to the
<lord-icon>tag. Lordicon's web documentation lists all available trigger options and their behavior specifications.Scroll-triggered animations require Webflow's scroll interactions combined with Lottie playback controls. Set up a scroll interaction that plays the Lottie animation when the element enters the viewport, creating progressive disclosure effects as users move through page content.
Based on general Lottie animation performance characteristics, Lordicon animations impact performance based on file size, number of simultaneous animations, and implementation method. Lottie JSON files vary in size depending on animation complexity. Vector-based Lottie animations scale without quality loss while maintaining efficient file sizes.
Consider limiting simultaneous animations on mobile devices to prevent frame rate drops. Use Webflow's interaction settings to trigger animations on user action rather than loading all animations immediately on page load. The native Lottie element method performs better than iframe embeds because it eliminates additional HTTP requests and browser rendering overhead.
Test performance using Chrome DevTools or Webflow's built-in preview mode on throttled connections. It’s recommended that you load animations asynchronously for content below the fold to prioritize above-fold rendering performance.
Using standard Webflow Interactions 2.0 features, Lordicon animations integrate with Webflow's interaction system when using the native Lottie element method. Create interactions that control Lottie playback through the Interactions panel, defining animation behavior for hover states, click events, scroll positions, or page load sequences.
You can set up multi-step interactions that chain multiple icon animations together, creating narrative sequences or progressive feature reveals. Use the timeline editor to control exact timing, playback speed, and animation coordination across multiple Lottie elements simultaneously.
For custom element implementations, combine Webflow interactions with Lordicon's JavaScript API to create complex animation systems. Trigger JavaScript functions through Webflow interactions that call Lordicon methods or update properties dynamically. Lordicon's web documentation provides complete API specifications for programmatic control.
Description
Lordicon is an animated icon library with 33,600+ customizable icons available in multiple styles.
This integration page is provided for informational and convenience purposes only.
Relume
Connect Relume to Webflow to get 1,000+ pre-built components with clean semantic HTML and responsive breakpoints already configured. Import complete wireframes or individual sections directly into your projects without manual layout work.
Haze
Connect Haze's customizable technology template with Webflow to rapidly build professional websites with pre-built components, responsive design, and full CMS capabilities.
Webflow Templates from ThemeForest
Purchase Webflow Templates created by ThemeForest's Global Community of independent Web Developers.
Webflow Templates from Creative Market
Purchase Webflow templates from Creative Market, then, redeem them on Webflow to edit and publish.
StickPNG
Connect StickPNG with Webflow to access 56,000+ transparent PNGs directly in your Designer Assets panel.
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
