You can add an image (like an icon) to a default Webflow button by placing it inside the button element and styling it using Flexbox. Here's how to do it.
1. Add the Button to Your Page
- Drag a Button element from the Add panel onto your canvas.
- Optionally, change the button's text under the Element Settings panel or directly on the canvas.
2. Add Your Icon/Image
- Drag an Image or SVG element and drop it into the button (before or after the text).
- For consistency, make sure the icon is small (e.g., 16x16 or 24x24 pixels).
- If you're using a native image, upload the file or select one from your assets.
- Select the Button element.
- In the Style panel, set Display: Flex.
- Choose Direction: Horizontal (Row) for side-by-side layout.
- Use Align: Center and Justify: Center/Start/End/Space-between as needed based on your layout.
4. Style the Icon
- Select the Image inside the button.
- Add margin to the icon (e.g., margin-right: 8px) to separate it from the text if the icon is placed before the text.
- You can control the size of the icon by setting a fixed width and height (e.g., 16px).
- If you need more layout flexibility, consider using a div block styled as a button with interactions and an embedded icon/text block.
- However, for accessibility and form submissions, it’s best to use the native Button component.
Summary
To add an icon to a button in Webflow, place an Image or SVG inside the button, set the button to Display: Flex, and adjust alignment and spacing. This enables a clean, responsive layout for buttons with icons.