Lordicon Animated Icons

How to integrate Lordicon with Webflow

Integrating Lordicon with Webflow gives you access to thousands of animated icons that can transform static interfaces into engaging, interactive experiences. While there's no official marketplace app, you can easily add Lordicon animations through Webflow's native Lottie support, embed codes, or API integration for more advanced implementations.

The flexibility of these methods allows you to choose the right approach based on your project needs — from simple drag-and-drop Lottie animations to dynamic icon management through the API.

Use Webflow's native Lottie animation element

The simplest way to add Lordicon animations to your Webflow site is through the built-in Lottie Animation element. This method requires no custom code and gives you full control over animation triggers through Webflow's visual interface.

Key capabilities:

• Upload Lottie JSON files directly to Webflow's media library
• Set animation triggers including hover, click, scroll into view, or page load through the Interactions panel
• Control playback settings like speed, direction, and loop behavior
• Responsive scaling that maintains quality across all devices
• No external dependencies since files are hosted on Webflow's CDN

Setup process:

1. Download your chosen icon from Lordicon as a Lottie JSON file
2. In Webflow Designer, drag the Lottie Animation element onto your canvas
3. Upload the JSON file and configure triggers in the Interactions panel
4. Style and position the element using Webflow's visual tools

This method works best for static icon placement where you know which animations you need at design time.

Embed Lordicon's web component

For more control over icon behavior and easier updates, use Lordicon's custom web component. This approach lets you manage animations through HTML attributes and supports advanced features not available in the Lottie element.

Key capabilities:

• Dynamic color changes using the colors attribute
• Advanced animation triggers including morph, boomerang, and sequence animations
• Stroke weight adjustments (light, regular, bold) for supported icons
• State management for icons with multiple animation states
• Lazy loading support to optimize page performance
• CSS variable integration for theme switching and dark mode support

Implementation steps:

1. Copy the embed code from Lordicon's library
2. Add an Embed element in Webflow where you want the icon
3. Paste the code, which includes the player script and lord-icon element
4. Customize attributes for colors, triggers, and sizing

Example embed code:

<script src="https://cdn.lordicon.com/lordicon.js"></script>
<lord-icon
 src="https://cdn.lordicon.com/lbjtvqiv.json"
 trigger="hover"
 colors="primary:#121331,secondary:#08a88a"
 style="width:50px;height:50px">
</lord-icon>

Build with Webflow and Lordicon APIs

For applications requiring dynamic icon management, automated updates, or CMS integration, combine the Webflow and Lordicon APIs. This approach enables programmatic control over your icon library and seamless content synchronization.

Core capabilities:

• Programmatic icon retrieval via GET /api/icons
• Dynamic customization through POST /api/icons/customize
• Collection management for organizing icons by project or theme
• Automated CMS updates using Webflow's Data API
• Webhook integration for real-time synchronization
• Bulk operations for managing large icon libraries

Dynamic icon loading

Load icons based on user actions or CMS data:

1. Authenticate with Lordicon API using your project token
2. Fetch icon data using GET /api/icons/{icon_id}
3. Update Webflow CMS items with icon references via PATCH /collections/:collection_id/items/:item_id
4. Render icons dynamically using Custom Code blocks

This method enables features like user-selected icons, conditional icon display based on data, and automated icon updates across your site.

CMS-driven icon management

Store icon references in Webflow CMS for dynamic content:

1. Create CMS fields for icon IDs or embed codes
2. Use the Lordicon API to populate these fields programmatically
3. Display icons using Collection Lists with dynamic embeds
4. Update icons site-wide by modifying CMS records

Perfect for blogs, product catalogs, or any content that needs consistent icon management at scale.

What you can build

Integrating Lordicon with Webflow opens possibilities for creating engaging, interactive web experiences. Here are proven use cases that demonstrate the integration's value:

• Interactive navigation systems: Build responsive menus where icons animate on hover, helping users understand navigation options instantly — like animated hamburger menus that transform into close buttons or category icons that pulse when selected
• Enhanced form experiences: Create forms with animated feedback icons that confirm successful submissions, show loading states during processing, or display error messages with animated warning symbols that catch user attention
• Dynamic product showcases: Design e-commerce sites where product features come alive with animated icons — shopping carts that bounce when items are added, wishlists that pulse with hearts, or comparison tools with animated checkmarks
• Engaging onboarding flows: Develop step-by-step tutorials where animated icons guide users through processes, making complex workflows feel intuitive and reducing the learning curve for new features