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.

Understanding the clamp(min, val, max) Function

In this template, the font size for dynamic text is controlled by the clamp() function:

clamp(min, val, max)

‍


This function allows the text to scale fluidly while staying within defined limits:

• min – The smallest font size allowed.
• val – The preferred value, which adjusts dynamically as long as it stays within the min and max range.
• max – The largest font size allowed.

‍

How This Works in the Template

In our template, val is set using the vw (viewport width) unit. Since 100vw equals 100% of the viewport width, using vw for font size means that the text will resize dynamically as the window size changes.

‍

Customizing the Text Size

To enter your own preferred content and ensure it fits well within the design, follow these steps:

1. Edit the existing text (e.g., change "Stay connected" to your desired content).
2. Experiment with the clamp(min, val, max) values to make sure the text adapts properly within the outer frame.

💡 Pro Tip: Keep vw as the font size unit to ensure the text resizes fluidly across different screen sizes.