# How To Add Icon To Button Webflow

> To add an icon to a button in Webflow, download an icon font file from Google Fonts, upload it under Custom fonts in your project settings, and select the new font for your button in the designer. Finally, copy and paste the icon name into the button text area.

Canonical: https://livedemo.ai/tutorials/how-to-add-icon-to-button-webflow/
Apps: Webflow
Updated: 2026-10-05
Interactive demo: https://story-api.livedemo.ai/workspaces/62255d3d3304f17b8f5e2d03/stories/692a2e04d673bd5aa8e5fdc5/preview?step=1

## Steps

1. Visit the Google Fonts website and go to the Icons section.
2. Locate the fonts download link .
3. Go to the fonts folder.
4. Click on the file variant you wish to download.
5. Click on the Download raw file button.
6. Now, inside the Webflow dashboard, click on the three dotted icon on your project thumbnail for options.
7. Click on Settings .
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. Once uploaded, your new font should appear under Installed fonts .
12. Inside the designer, go to the button you wish to add an icon to.
13. From the right sidebar menu, change its font from under the Typography section.
14. Select our new Google Icons Font .
15. Back inside Google Fonts, find or search for the icon you wish to use.
16. Copy the icon name within the span tags.
17. Select the text area in the button and enter the text for the icon.
18. You now have a button with an icon in Webflow. Since this icon is technically a text you can also edit it as such using colors, sizes, etc.