Smootify Icons Webflow integration
Access 10,000+ SVG icons directly in Webflow without downloading files or managing external asset libraries. Smootify Icons integrates 8 icon libraries with native styling controls.
How to build with Smootify Icons and Webflow
Smootify Icons integrates with Webflow through the Smootify Icons app, which embeds 10,000+ SVG icons from 8 libraries directly into Webflow as native elements. Icons work with the Style panel, animation system, and responsive design tools without external downloads or file management.
This marketplace app removes the typical icon workflow of maintaining external library subscriptions, downloading individual SVG files, and manually uploading assets. Install the app to get searchable access to Google Material Icons, Iconoir, Hero Icons, Lucide, and four additional libraries.
Use the Smootify Icons app
The Smootify Icons app gives you searchable access to 10,000+ SVG icons directly in Webflow. You can browse libraries visually, insert icons with single-click actions, and customize colors and sizes using Webflow's Style panel controls without writing code.
After installing from the marketplace, the app integrates into your Webflow interface with built-in search functionality. Icons appear as native Webflow elements that respond to all standard styling controls, animations, and responsive design settings.
The app provides these capabilities:
- Search 10,000+ icons across Google Material Icons, Iconoir, Hero Icons, Lucide, and four additional libraries
- Insert as native elements that work with Webflow's visual styling system
- Customize in real time using color controls, size adjustments, and transform properties
- Access across projects through the marketplace app
What you can build
Integrating Smootify Icons with Webflow gives you immediate access to 10,000+ customizable SVG icons across 8 libraries for feature sections, navigation elements, product highlights, and visual communication without managing external resources.
- SaaS landing pages: Build feature comparison tables with specification icons by searching Material Icons for common UI patterns (settings, dashboard, analytics), inserting directly into grid layouts, and applying class-based color theming for brand consistency
- E-commerce product pages: Create product specification sections with technical indicator icons by using Lucide icons for shipping, returns, and security badges, styling them inline with product card typography, and maintaining consistent sizing across responsive breakpoints. Insert icons into collection list items for CMS-driven product catalogs that scale across your inventory
- Agency portfolios: Design service grid layouts with capability indicators by inserting Hero Icons for technical services (code, design, analytics), grouping them in collection lists for CMS-driven content, and applying hover state animations using Webflow interactions. Create symbol components containing icon-plus-text patterns for reuse across portfolio sections
- Documentation sites: Build navigation hierarchies with section identifiers by using Iconoir's line-style icons for content categories, embedding them in symbol components for sidebar navigation, and implementing toggle states for expandable menu sections through Webflow's interaction system
Frequently asked questions
Smootify Icons bypasses Webflow's 4MB SVG asset limit and custom code character restrictions by inserting icons as native Webflow elements rather than uploaded files or embedded code. Icons inserted through the app don't consume your custom code character limits (50,000 per section) or count against asset storage quotas. This approach avoids the manual optimization workflow required when uploading SVG files directly, while maintaining full compatibility with Webflow's Style panel controls and animation system.
According to Webflow's Developer Documentation, Webflow offers three distinct code placement locations.
Head custom code at the site or page level works best for:
- Icon font CSS, critical JavaScript, and SVG sprite definitions (single images containing multiple icons)
- Resources that must load before content renders to avoid visual issues
Footer custom code before
</body>works best for:- Non-critical JavaScript such as animations and tracking scripts
- Resources that can load after page content to improve performance
Code Embed elements inline on canvas work best for:
- Individual SVG icons and inline code snippets for specific sections
- Code blocks up to the 50,000 character maximum per embed
Place critical resources like CSS and icon fonts in Site Settings > Custom Code > Head section so fonts load before page renders. For dynamic content scenarios, Webflow's CMS custom code lets you add icon markup to Collection items across templated structures.
Webflow states that custom code is an advanced feature, and Webflow does not guarantee full compatibility or provide direct support for custom code troubleshooting. You need to resolve implementation issues independently when using manual code embed methods. Test thoroughly in published environments rather than relying solely on preview, and contact Eclipse SRL directly for Smootify Icons-specific guidance not available in public documentation.
Webflow has documented rendering discrepancies between Designer preview and live sites. According to community reports on width/height interpretation, SVG icons may display differently in Designer preview compared to published live sites. Additionally, a documented bug converts the style attribute to uppercase STYLE, causing styles to fail entirely in some browsers, as reported in Webflow's community bug reports. Test icons on staging or live sites rather than relying solely on Designer preview for quality assurance, and consider cross-browser testing—particularly in Firefox—to identify rendering inconsistencies before launch.
Description
Smootify Icons provides over 10,000 SVG icons across 8 distinct libraries with native Webflow integration. The app consolidates established icon libraries including Google Material Icons, Iconoir, Hero Icons, and Lucide into a single searchable interface.
This integration page is provided for informational and convenience purposes only.
Devblocks CMS Image Optimizer
Large CMS collections accumulate uncompressed images over time as content editors upload full-resolution photos and marketing teams import product libraries. Each uncompressed image increases page load times and consumes bandwidth.
Flowdrive
Connect Flowdrive, an external file and video hosting service, with Webflow to host videos and enable file uploads without Webflow's Business plan requirement.
Lummi
Connect Lummi, an AI-generated stock image platform, with Webflow to search, customize, and insert royalty-free images directly in the Designer without leaving your canvas.
Image Management
Connect the Pixlevents Image Management Webflow app to optimize CMS images and convert formats to WebP and AVIF without leaving your workspace.
Chainlift Color
Connect Chainlift Color with Webflow to generate accessible Material 3 dynamic color themes with pre-configured utility classes and color variables.
Bynder
Connect Bynder with Webflow to manage brand-approved digital assets within your design workflow and serve optimized content through Bynder's global CDN.
Asset Bae
Connect Asset Bae with Webflow to bulk-edit image filenames and alt text, with AI-generated alt text for accessibility compliance.
Frontify
Connect Frontify with Webflow to search, browse, and insert assets directly in your site without switching platforms.
Virtual Tours
Connect Virtual Tours to your Webflow site and display interactive 360° tours on any page.
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.
