How To Add Icon To Button Webflow

Quick summary

Adding an icon to a button in Webflow requires downloading a Google Material Icons font and uploading it as a custom font in your project settings. Once installed, you can apply the icon font via the Typography section in the Webflow designer and paste the icon name directly into the button's text field.

Steps

1. Visit the Google Fonts website and navigate to the Icons section.
2. Locate the fonts download link on the page.
3. Go to the fonts folder in the downloaded repository.
4. Click on the file variant you wish to download.
5. Click the Download raw file button to save the font file locally.
6. In the Webflow dashboard, click the three dotted icon on your project thumbnail to open options.
7. Click on Settings from the dropdown menu.
8. Go to the Fonts section from the left sidebar menu.
9. Scroll to Custom fonts and upload your icon font file.
10. Enter a name for the file and click Upload.
11. Confirm your new font appears under Installed fonts.
12. Inside the Webflow designer, navigate to the button you wish to add an icon to.
13. From the right sidebar, change the button's font under the Typography section.
14. Select the newly uploaded Google Icons Font.
15. Back in Google Fonts, find or search for the icon you wish to use.
16. Copy the icon name within the span tags from the Google Fonts page.
17. Select the text area inside the button and paste the icon name as the button text.
18. Your button now displays an icon in Webflow — style it using color, size, and other text properties as needed.