How can I change the default icon in a dropdown item in Webflow?
TL;DR
- Select the Dropdown Toggle, remove or hide the default Dropdown Icon.
- Add a custom icon inside the Toggle, position and style it, then optionally animate it using interactions for open/close effects.
To change the default icon in a Dropdown element in Webflow, you need to replace or style the built-in dropdown toggle icon. Here's how to do it.
1. Select the Dropdown Toggle
- In the Webflow Designer, click on the Dropdown element to expand it.
- Select the Dropdown Toggle component (the clickable area that triggers the dropdown).
- You’ll see a small arrow icon on the right inside this toggle by default.
2. Remove or Hide the Default Arrow
- With the Dropdown Toggle selected, go to the Navigator panel to locate the nested Dropdown Icon.
- Select the Dropdown Icon, then either:
- Delete it, or
- Set its Display to "None" in the Style panel.
3. Add Your Custom Icon
- Drag in a new Image or Icon element (from your assets or Webflow’s built-in icons) into the Dropdown Toggle.
- Position your icon using flexbox or absolute positioning depending on your design.
- Style the icon to match your layout (size, margin, rotation, etc.).
4. Animate or Rotate the Custom Icon (Optional)
- To indicate open/close state visually, you can apply a combo class (e.g., "open") on the Dropdown Toggle when the dropdown is opened.
- Use interactions (IX2) to rotate or animate the icon when the dropdown is triggered:
- Go to the Interactions panel.
- Create an animation for the dropdown open/close trigger.
- Animate your icon accordingly (e.g., rotate 180° on open, then back on close).
Summary
To change the default icon in a Webflow dropdown, remove the default Dropdown Icon, add your custom image or icon inside the Toggle, and optionally animate it using interactions.