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.
Icons8 Graphics
Connect Icons8 Graphics with Webflow to search and insert icons, illustrations, and photos directly in your project without leaving the canvas.
Logo To Use
Install the Logo To Use app to browse copyright-free logos and add them directly to your Webflow project's assets. You can also download logos from logotouse.com and upload them manually.
Modulo
Connect Modulo with Webflow to add pre-designed, production-ready UI components to your sites like hero sections, feature blocks, FAQ layouts, CTAs, and more, directly inside Webflow.
Stockpress
Connect Stockpress, a digital asset management platform, with Webflow to browse, search, and place brand assets directly in Webflow without switching platforms.
Stockpress
Connect Stockpress, a digital asset management platform, with Webflow to browse, search, and place brand assets directly in Webflow without switching platforms.
Modulo
Connect Modulo with Webflow to add pre-designed, production-ready UI components to your sites like hero sections, feature blocks, FAQ layouts, CTAs, and more, directly inside Webflow.
Goat Slider
Connect Goat Slider, a CMS-driven slider app, with Webflow to add dynamic carousels and sliders that automatically update when your content changes.
Pixcap Editable 3D Icons and Characters
Connect Pixcap, a customizable 3D asset library, with Webflow to browse, customize, and insert 3D icons, illustrations, and characters directly in Webflow without 3D modeling skills.
CutCopy
Connect CutCopy with Webflow to transfer variables and attributes between projects without manual recreation.
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.
