IconScout

How to integrate IconScout with Webflow

IconScout provides access to 12.4+ million icons, illustrations, 3D assets, and Lottie animations that work directly with Webflow. Integrating IconScout with Webflow eliminates manual asset export workflows and gives you consistent visual elements across projects without copying files between tools.

The Desktop App enables drag-and-drop asset insertion during design. Code embeds give you control over SVG styling and Lottie animation triggers. API integration automates asset management for teams building design systems or managing large asset libraries.

Use the IconScout Desktop App

The IconScout Desktop App connects directly to Webflow's interface. Download the Mac or Windows application, search assets by keyword and style, then drag them into your canvas. This method requires no coding and works immediately.

This integration enables:

• Real-time search across 12.4+ million assets filtered by style, color, and format
• Direct canvas insertion of SVG icons, illustrations, and 3D assets without export steps
• Instant preview of assets before adding them to your design
• Style preservation when dragging assets into existing design systems

The Desktop App handles file optimization automatically. SVGs insert as scalable vectors that work with Webflow's styling system. Large files get compressed during transfer to maintain performance.

Note: Browser extensions like Grammarly or ad blockers can interfere with the drag-and-drop process, so disable them if you experience interface issues.

Embed assets with custom code

Webflow's custom Code Embed element accepts SVG code and Lottie animation scripts from IconScout. This method gives you control over asset rendering and animation triggers that aren't available through direct insertion.

To do this, find the asset you want on IconScout, copy the embed code, then paste it into a Code Embed element from Webflow's Add panel. SVG embeds let you manipulate the code directly for custom styling or interactions. Lottie animations can trigger on scroll, click, or page load through custom JavaScript.

Asset formats that work with embeds:

• SVG code for icons and illustrations with styling control
• Lottie JSON for animations with programmatic trigger control
• Lottie as MP4 or GIF for simpler animation playback without JavaScript

Note: Code Embed elements have a 50,000 character limit in Webflow. Complex Lottie animations or detailed SVGs sometimes exceed this. Optimize large files before embedding or host them externally and reference them via URL.

Large SVG files with hundreds of paths slow page load times. Lottie animations with high frame rates or complex effects impact rendering performance. Test on mobile devices before publishing.

Build with Webflow and IconScout APIs

The IconScout API combined with Webflow's Data API enables automated asset workflows. This approach works when you're syncing design system assets across multiple sites or automating content updates that include visual elements.

API integration requires backend infrastructure to coordinate between services. You'll handle authentication for both platforms, manage asset access from IconScout, then work with Webflow's asset system or CMS.

Note: This method demands more development work than the Desktop App or embed methods but enables workflows that manual processes can't scale to support.

Access assets through IconScout's API

The IconScout search endpoint accepts queries with filters for asset type, style, and format. Each result includes metadata and access URLs. IconScout's API license agreement requires real-time asset access and prohibits local storage or caching. Meaning assets must be referenced directly from IconScout's servers.

Here’s how to implement this integration:

1. Search assets with GET /search?asset={type}&query={term} specifying icon, illustration, or 3D type
2. Get asset metadata with GET /items/{item_uuid} for licensing and format details
3. Reference assets with direct URLs from IconScout's API responses
4. Display assets in Webflow through custom code or embed elements

IconScout requires Client-ID for public operations and Client-Secret for asset access. API access requires written approval from IconScout. Webflow uses Bearer token authentication with site-specific scoping. Store credentials securely and never expose them in client-side code.

Populate CMS collections with asset metadata

Store IconScout asset references in Webflow CMS collections when you're building design systems, component libraries, or content templates. This pattern works for documentation sites, UI kits, or projects where content editors need to select from a curated asset set.

Create a CMS collection with fields for asset URLs, types, and categorization. Use the Webflow CMS API to populate items. Your backend service queries IconScout, processes results, then creates CMS items that editors can reference through reference fields.

Here’s what this workflow can look like:

1. Create collection structure with fields for asset URLs, types, tags, and reference metadata
2. Query IconScout API for assets matching your design system criteria
3. Create CMS items with POST /collections/{collectionId}/items for each asset reference
4. Publish items with POST /collections/{collectionId}/items/publish to make them available

This approach gives content editors a visual picker for assets without requiring IconScout accounts. They work within Webflow's CMS interface while your backend maintains references to IconScout's library.

Trigger updates with webhooks

Webflow webhooks notify your backend when site changes occur. Register webhooks that trigger asset updates when collections change, pages publish, or forms submit. Your service can respond by updating asset references or generating new pages with appropriate IconScout assets.

IconScout doesn't provide webhook support. Your integration must poll the IconScout API for changes if you need bidirectional synchronization.

Register webhooks with POST /sites/{siteId}/webhooks specifying the events you want to monitor. Your endpoint receives POST requests with event data when triggers fire.

What you can build

Integrating IconScout with Webflow gives you consistent visual design across projects while reducing manual asset management.

• Component libraries with standardized icons: Build reusable Webflow components that reference specific IconScout icons through the Desktop App, maintaining UI consistency across pages without manually copying assets
• Marketing sites with animated illustrations: Create landing pages where Lottie animations from IconScout trigger on scroll or interaction through Code Embed elements
• Documentation sites with technical diagrams: Populate help centers with IconScout's 3D assets and technical illustrations through the Desktop App, maintaining visual consistency across pages
• Design systems with centralized asset libraries: Use API integration to store curated asset references in Webflow CMS collections, giving content editors a consistent palette without IconScout accounts