Why is Webflow no longer allowing me to use SVG icons within link blocks?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

Webflow no longer allows the use of SVG icons within link blocks due to security concerns and best practices for web design. Here are a few reasons why this decision has been made:

Security: SVG (Scalable Vector Graphics) allows the embedding of executable code within the SVG file, which can create a security vulnerability. Hackers may exploit this vulnerability to inject harmful code into your website, potentially compromising its security.
Performance: SVG icons embedded within link blocks can increase the overall page weight and affect website performance. Link blocks are interactive elements, and SVG icons within them can slow down the rendering process, leading to a suboptimal user experience.
Accessibility: SVG icons within link blocks may cause accessibility issues for users with disabilities. Screen readers may not be able to interpret or convey the meaning of the SVG icons, making the website less accessible to users who rely on assistive technologies.
Ease of maintenance: By discouraging the use of SVG icons within link blocks, Webflow encourages the use of more manageable alternatives like icon fonts or bitmap images. Icon fonts are easier to deploy, maintain, and style, making them a more efficient solution for web designers.
Compatibility: Not all browsers support SVG icons within link blocks consistently, especially older versions. To ensure a consistent experience across different browsers, it is recommended to use more widely supported alternatives.

To work around this limitation, consider using one of the following alternatives:

Insert SVG icons outside the link blocks and position them accordingly using absolute positioning or flexbox.
Convert the SVG icons to icon fonts using a tool like Font Awesome or Icomoon and add them to your project.
Export SVG images as PNG or JPEG and use them as static images within link blocks.

Remember that while these alternatives may not possess the same scalability and adaptability as SVG icons, they provide a more secure and performant solution for your website.

Additional Questions:

Can I still use SVG icons in other elements within Webflow?
What are some recommended icon font libraries that work well with Webflow?
Are there any third-party integrations available for using SVG icons within link blocks in Webflow?

Why does the form field in Webflow not respond to taps on a mobile device?

How can I trigger a JS event when a button is clicked in Webflow to track goals or conversions using the Plausible.io analytics tool?

Is there a way to identify customers from Northern Ireland using their zip/post codes in Webflow and offer them a preferential shipping rate instead of being tied to the UK as a whole?

What can be done to prevent the loss of bullet point style when transferring richtext from Airtable to Webflow through Zapier?

How can I add Google Adsense banner ads to my Webflow site?

In Webflow, is there a way to add unique Div IDs for each collection item in order to redirect users to corresponding workspace detail on another page?

Does anyone else have the problem of spaces disappearing when copying text from Word into Webflow, and are there any known workarounds or fixes for this issue?

Has anyone else using Webflow experienced spam form submissions with an unknown field called "Send"?

Why is the "Checked" state missing when creating new Radio Buttons in Webflow?

How can I change the admin information in Webflow after the previous admin has left the company?