Webflow sync, pageviews & more.
NEW

Why do the icons I added in Webflow designer not show up in view mode on my site?

TL;DR
  • Ensure icon fonts or SVGs are correctly linked or embedded, and re-publish your site after making changes.
  • Check CSS visibility, font loading issues, and try publishing to webflow.io to rule out hosting or DNS problems.

Icons in Webflow not appearing on the live or published site is a common issue usually caused by missing assets, incorrect font settings, or publish problems.

1. Check If Icons Are Properly Linked

  • If you're using icon fonts (like Font Awesome), ensure the CDN link or font file is connected correctly under Project Settings > Custom Code or via a Font integration.
  • If you added custom SVG icons via Embed or as inline elements, confirm they were pasted correctly and are not broken or missing code.

2. Confirm Publishing Is Complete

  • Click the “Publish” button and select your domain to ensure the changes are reflected on the live site.
  • Always re-publish after making edits in the Designer. Sometimes elements only work after a fresh publish.

3. Verify Visibility and Styling

  • Check that your icons are not getting hidden by CSS. Go to the Styles panel and make sure:
  • The icon or element is not set to display: none.
  • Their font color is not the same as the background.
  • The font size and line height are appropriate for visibility.

4. Confirm Font File Loads Correctly

  • If using a Webflow-hosted custom font or an uploaded icon font, make sure it's available in Project Settings > Fonts.
  • In the browser console, check for 404 errors on font files that may indicate a loading problem.

5. Check SVG Upload/Embed Issues

  • If you're using SVG images, ensure you:
  • Uploaded them as Image elements, or
  • Used Embed elements with clean, valid SVG markup.
  • Avoid SVGs with external styles or scripts that may get stripped or blocked.

6. Publish to Webflow.io to Rule Out DNS or Hosting Issues

  • Publish your site to the webflow.io domain to see if the icons appear there.
  • If they do, and are missing from a custom domain version, the issue may be tied to caching or DNS misconfiguration.

Summary

If your Webflow icons aren’t showing live, check for publish status, broken or missing font links, visibility settings, or SVG rendering issues. Publishing to webflow.io can help isolate the problem.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
How can I pass the schedule information of a location to a collection popup in Webflow, so that the client can update the schedule images?
Before long, I added a dropdown for selecting a country code to a website I created for a client using Webflow and some basic JavaScript. This integration was successful and helped address their issue of users forgetting to include the country code in their phone numbers. Is there a way to optimize the dropdown for better user experience?
Why are the links for the "Sign Up" and "Log In" pages redirecting to the home page instead of their intended pages on my Webflow website when using Chrome and Edge browsers?
How can I disable fullPage.js on mobile view in Webflow? I have tried setting related Div Blocks to "Hide on Phone Portrait" but it doesn't seem to work. Is there a way to add a few lines of JavaScript code to achieve this?
How can I create a lightbox hover effect with text in Webflow similar to the example shown in the tutorial?
How can I apply for the 50% off annual fee on website hosting as a student with a Webflow student account?
Is anyone else experiencing issues with Webflow when uploading multiple custom fonts at once? It seems that now you can only select and install one font at a time, and attempting to upload another without installing causes Webflow to crash.
Has anyone successfully used Webflow and Shopify together to run an e-commerce store? If so, can you provide any feedback on this process?
Has there been any recent updates to adding an audio section in Webflow without extensive coding?
How can I ensure that the tablet design in Webflow matches the PC design, especially when the tablet is set horizontally?
How can I clean up or delete the 301 redirects on my Webflow site to improve SEO audits and checks?
How can I center my CTA button on my hero image in Webflow? I have a flexbox as the parent element (my hero image), but the button is not centered underneath the hero text.
Am I not using Webflow CMS properly if I need more than 30 fields for each case study section? Can I add a non-collection section to a collection page in Webflow? Is there a better way to build case studies using Webflow that allows for more flexibility? Thank you.
How can I create a section in Webflow that includes a collection list with 5 items displayed in the same row, where the third item is larger than the others?
How can I update a collection list with member information in Webflow? I've tried using a sign-up form as a logic trigger, but it doesn't work. I've also tried using a basic form and sending a membership invite, but that doesn't work either. Can someone help me figure out why it's not working?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I dynamically redirect to a CMS created after form submission in Webflow?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!
How can I prevent the "w-current" class in Webflow from overriding the height of my custom class on a link block element?
Can anyone help me add a digital clock and date to my Webflow site? I've been able to add custom code, but I need assistance with styling the text. Thank you in advance for your help!
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How do I mirror user input from a form field to a non-form text field on the same Webflow page in real-time using JavaScript?
How can I close a dropdown in Webflow when clicking on a link?
Is there a more optimal way to create a portfolio section with a sticky image container that changes as you scroll, similar to the design on Deveb's website, that works across different web browsers, especially Safari, using Webflow or any other JavaScript tools?
How can I implement a multi-select field with a pre-selected option in a popup form on a collection page using Webflow?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?