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.
AI Image Enhancer
Connect AI Image Enhancer by OLAI to your Webflow site to upgrade image quality and generate custom visuals without leaving your workspace.
Vimeo
Connect Vimeo's professional video hosting platform with Webflow to create engaging websites with high-quality video content, custom players, and seamless CMS integration. Display portfolio reels, educational content, or background videos while maintaining complete control over playback and design.
Videezy Webflow Integration
Connect Videezy (HD stock video library) with Webflow to create engaging backgrounds, hero sections, and dynamic galleries using free and premium footage — no complex production required.
Unsplash
Seamlessly integrate Unsplash's library of over 5 million high-quality, royalty-free images directly into your Webflow Designer. Search, filter, and insert professional photography without leaving your design environment, accelerating content creation while maintaining visual excellence.
Uploadcare File Uploader
Connect Uploadcare's powerful file handling capabilities with Webflow to enable advanced file uploads, image optimization, and content delivery for your websites. This integration allows site visitors to upload files directly through your Webflow forms, automatically processes images for optimal delivery, and stores files securely in the cloud — all without complex backend infrastructure.
SVGator
Add SVGator animations to Webflow sites for scalable vector motion graphics with interactive triggers.
Pixabay
Connect Pixabay's library of 5.3+ million royalty-free images, videos, and audio files to your Webflow site. Build visually rich websites without licensing fees while maintaining complete design control and copyright compliance.
Pngtree
Connect Pngtree – a library of millions of royalty-free PNGs, vectors, and design templates – with Webflow to streamline your design workflow by accessing transparent graphics, infographics, and marketing assets without leaving the platform
Pexels
Add millions of free, high-quality stock photos and videos to your Webflow sites instantly. Search and embed professional media content without leaving Webflow, while maintaining proper attribution and optimizing for performance.
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.
