Smootify Icons

Adding an SVG icon usually means downloading a file and uploading it to Assets, where images max out at 4MB. Or you paste its markup into a Code Embed element, which caps custom code at 50,000 characters and needs an active Site plan or a Core, Growth, Agency or Freelancer Workspace. Smootify Icons takes the file handling out of that loop.

With the app installed, you open an icon library inside Webflow and click an icon. The app drops it onto the canvas at the element you selected in the Navigator, and you adjust its color and size from there.

Designers and developers building Shopify storefronts with core Smootify can add icons to product pages. Agencies managing several client sites can authorize it once for a whole Workspace. The app also fits projects with no ecommerce, such as SaaS landing pages and portfolios.

How to integrate Smootify Icons with Webflow

What is Smootify Icons? Smootify Icons is a free Webflow Marketplace app from Eclipse SRL, the company behind the Smootify Shopify-to-Webflow integration. Its listing counts more than 10,000 SVG icons in eight libraries, and the app's library picker shows Heroicons, Material, Eva, Lucide, Flowbite, Mono, css.gg and Iconoir. You pick an icon and the app places it on the Webflow canvas. Smootify's launch post for the app is dated September 3, 2025, though the listing's address still carries the name of Udesly, an older Eclipse product.

Teams use Smootify Icons when a project needs consistent icons across pages and breakpoints without a growing Assets folder. The app runs on its own; it does not need a Shopify store or the core Smootify app. The launch post describes it as a companion "for building your Ecommerce with Smootify or any other Webflow project."

Two methods cover the work. The Smootify Icons app finds and inserts icons without code, and native styling plus Collection List placement let you theme and repeat the icons you inserted.

Install the Smootify Icons app

The Smootify Icons app runs inside Webflow and places icons where you point it. Its Marketplace listing prices it as Free, carries an "Approved by Webflow" badge and declares two capabilities, "Access site data" and "Designer workflow". Support runs through support@smootify.io.

To set up the integration:

1. Open the Smootify Icons listing in the Marketplace and click Add to site. Or open the Apps panel in Webflow, search for the app and click Install on site.
2. Select the Workspaces or sites to authorize, then click Authorize app. Workspace-level authorization covers every current and future site in that Workspace.
3. Click Go to "Smootify Icons" on the pop-up banner. On later visits, open the Apps panel, hover over the app and click Launch.
4. In the Navigator, select the element where the icon should sit.
5. Choose a library in the app window and click an icon. It appears at the selected position.
6. Open the Style panel and set color and size.

The app window itself is small, and the listing screenshots show how it is laid out.

• Library picker: The opening screen shows all eight libraries as tiles, and each tile opens that library's icon grid.
• Search and styles: Inside a library, a search field filters the grid and a dropdown switches between that library's styles, such as Solid for Heroicons.
• License link: Each library view carries a License link, so you can read an icon set's terms before you ship it.
• Workspace access: Authorizing at Workspace level makes the app available on every current and future site in that Workspace.

Everything after insertion happens in Webflow's own panels, which the next section covers.

Style and repeat inserted icons with native Webflow tools

Once an icon is on the canvas, you style and position it with Webflow's own tools. Class-based theming and Collection List placement need no further app involvement. Reopen the app from the Apps panel only when you need another icon.

Theme icons with classes and the Style panel

For a SaaS page, use Smootify Icons to insert Material Icons, then apply class-based color theming. Material Icons work well in feature grids where every icon shares one color. One class controls every icon that carries it, so a palette change happens once.

To theme a set of icons:

1. Select the icon in the Navigator and give it a class such as icon-feature.
2. Set color and size in the Style panel.
3. Add a hover interaction from the Interactions panel for service grids or feature cards.

Changing the class later restyles every icon that shares it, including icons inside Collection List items.

Place icons inside Collection List items

Ecommerce catalogs built from Webflow CMS collections can pair Lucide icons with shipping and returns notes. An icon inserted into the Collection Item template repeats for every item in the list. Select the target inside the template before you open the app.

To add an icon to a Collection List:

1. Add a Collection List bound to the collection, such as a product feature list.
2. In the Navigator, select the Div Block inside the Collection Item where the icon belongs.
3. Launch Smootify Icons and pick an icon. It goes into the Div Block you selected in the template.
4. Style the icon once; every item in the list inherits the result.

Updating that icon's class later changes it in every Collection Item at once.

What you can build with the Smootify Icons Webflow integration

These four builds use only the libraries the app ships and Webflow's own styling tools.

• SaaS feature comparison table: Mark included and excluded features with Material Icons on a SaaS landing page. One class sets the color, so a brand change updates the whole table.
• Ecommerce product page: Add Lucide icons for shipping and returns beside each Collection List item. This also works on Shopify-backed pages built with core Smootify.
• Agency portfolio service grid: Give each service card a Hero Icons glyph with a hover animation built in the Interactions panel.
• Documentation site navigation: Mark sections and sub-sections in a sidebar with Iconoir icons, inserted once per level and restyled by class.

Each build starts the same way: select the target in the Navigator, insert the icon, then style it by class. Building the store as well? Follow our headless Shopify commerce guide.