Webflow

The HubToolify Icons app for Webflow puts the library in a panel inside the Webflow Designer, in four tabs: Icons, Stickers, Illustrations and AI. Search, pick a style, a size and a colour, then click to insert. Icons land as real <svg> elements on the page; stickers, illustrations and AI pictures are added to the site's Assets and placed as Image elements.

Coming to the Webflow Marketplace. The app is built and is waiting for Webflow's review. This page will link to it as soon as it is listed. Until then, download icons as SVG from the icon library and upload them to Webflow.

Install#

Once it is listed, install it from the Webflow Marketplace, then open it in the Designer from the Apps panel (press E).

Where things land#

Select an element on the canvas first. If it can hold children, such as a Section, Div block or Link block, the new element goes inside it, at the end. If it cannot, such as a Heading or an Image, the new element goes right after it. With nothing selected, it goes at the end of the page.

Insert icons#

1. Type in the search box, such as home or arrow up. The best matches come first.
2. Choose a style. Line is free; the styles marked Pro need a Pro plan.
3. Choose a size (16 to 64 px) and a colour.
4. Click an icon. It lands as an <svg> element, so it stays sharp at any size and you can style it with classes like any other element.

Choose Current colour to have the icon follow the text colour of where you put it, which is handy inside buttons and links. The previews show the colour you pick. Duo and Flat start in each icon's own colour until you pick one. Jass and Lineal keep their fixed palette. 3D icons are rendered images, so they are not in the app; download them from the icon library.

Stickers and illustrations#

With a Pro plan, the Stickers and Illustrations tabs list every pack. Pick a pack or search, then click to insert. The artwork is uploaded to your site's Assets as an SVG and placed as an Image element, 200 px wide for a sticker and 480 px for an illustration. You can find it again in the Assets panel. Animated stickers and scenes insert as their still picture.

Create with AI#

The AI tab draws a new icon, sticker or illustration from your description, with the same generators as hubtoolify.com. Sign in first. Describe what you want, pick a style and how many, and the button shows the price in AI credits before you draw. Pro plans include 100 credits every month, and you can buy more.

Click a result to insert it: an AI icon lands as an <svg> element in the colour you pick, an AI sticker as a cut-out PNG with a white border, and an AI illustration as the picture the AI drew. Both pictures are added to your Assets. If a request fails, nothing is charged.

Pro styles#

Choose Sign in for Pro at the bottom of the panel. The app shows a code and opens hubtoolify.com in your browser. Sign in there, enter the code and confirm. The panel signs in within a few seconds.

The connection can search and insert, and create with AI from your credits, always showing the price first. It cannot buy credits or change your plan. Remove it any time under Account → Connected apps, or choose Sign out in the panel.

If your plan ends, the Pro styles lock again in the panel. Icons and artwork you already placed in your Webflow sites stay where they are; see the licence.

Permissions#

Inserting needs a Webflow role that can design the site; adding stickers, illustrations and AI pictures also needs permission to manage assets. If a click does nothing, ask the site's owner for the Designer role.