Editing SVG Icons

Our template includes prebuilt SVG icons in three sizes: Regular, M, and L. If you want to adjust their size, follow these steps:

Resizing an Existing SVG Icon

1. Open the Components panel and drag the icon you want to use onto the canvas.
2. Right-click the icon and select "Unlink Instance" to detach it from the component.
3. In the right panel, navigate to the Size section.
4. Adjust the Width and Height as needed.

💡 Keep in mind: Any changes you make will be applied globally to all icons using the same class (i.e., the "Icon" class)

Changing the Icon Color

If you want to change the icon color, head to the Typography section in the Style panel and adjust the font color.

💡 Keep in mind: Any changes you make will be applied globally to all icons using the same class (i.e., the "Icon" class)

Adding Editable SVG Icons

If you want to add new SVG icons that can be styled directly within Webflow, you can use Phosphor Icons, a flexible and customizable icon library.

How to Import a New SVG Icon

1. Visit Phosphor Icons and browse their library.
2. Find the icon you want and click "Copy SVG" to copy the SVG code to your clipboard.
3. In Webflow, insert a Code Embed element onto your page.
4. Paste the SVG code you copied.

Making the SVG Icon Editable in Webflow

1. Locate the "fill" attribute in the SVG code.
2. Replace its value with currentColor (without quotation marks).
   • This allows the icon to inherit text color from Webflow’s Style panel.

Now, you can easily adjust the color and size of the icon directly within Webflow.

💡 Pro Tip: Our templates come with a predefined “Icon” class, so you can simply apply this class to your new icon to maintain a consistent style across your site.