Studio Editor: Adding Animations to Button Icons
5 min
In this article
- Adding a pre-designed icon animation
- Creating custom icon animations
- Designing the icon
- Custom icon requirements and guidelines
Using styled buttons? Add icon animations create eye-catching effects, making your clients' sites interactive to the smallest detail.
Choose from Wix Studio’s variety of pre-designed animated icons for a ready-made effect, or combine a start and end icon to craft a custom animation. You can even upload your own SVG files for a personalized touch.
How do button icon animations work?
Adding a pre-designed icon animation
Choose one of our striking icon animations for fast editing. Once you've selected the effect you want, you can set the duration.
To add a pre-designed animated icon:
- Go to your editor.
- Click the relevant styled button.
- Click Settings.
- Click Animated under Icon type.
- Choose what to do next:
- Select the desired icon under Choose icon
- Click the Add icon
to explore our full range of animated icons in the Media Manager.
- (Optional) Drag the slider to change the Duration of the animation.
Tip:
Hover over our pre-designed icons to preview their animation.
Creating custom icon animations
Create your own icon animations for buttons on your client's site. By selecting both a start icon and an end icon, you can craft a seamless animation that is unique to your client's site. Combine icons from Wix, or use 2 of your own SVG files.
To create custom animations:
- Go to your editor.
- Click the relevant styled button.
- Click Settings.
- Select Animated under Icon type.
- Click the Add icon
and select Create new. - Set up your start and end icons:
- Click Add icon
under Start icon. - Select a file in the Media from Wix tab, or upload / select your own in Site Files.
- Click Choose File.
- Repeat steps a-c for the End icon.
- Click Add icon
- (Optional) Click Back at the top, and use the slider to set the Duration.
Tips:
- You can combine your own file with an icon from Wix.
- Use the preview box to make sure that the effect looks how you want.
Designing the icon
Tailor the icon to fit your design vision, your client's unique branding, and the particular button. Resize the icon, change its color and rotate it to make the button feel more dynamic.
You can design the hover state of the button, giving you the opportunity to add an extra layer of interactivity – for example, make the icon rotate or shift colors on hover.
To design the icon:
- Go to your editor.
- Click the relevant styled button.
- Click the Open Inspector icon
at the top right of the editor.
- Select the relevant State under Design: Regular or Hover.
- Click Icon under Design.
- Use the available options to design the icon:
- Resize the icon.
- Change the icon color and adjust the opacity.
- Rotate the icon to a different angle.
Custom icon requirements and guidelines
Custom icons have some requirements. In order to upload and use your own files, they must be:
- Solid black (#000000) only
- In an SVG format
- No bigger than 250KB
Note:
If you have created your SVG files in Adobe Illustrator or Figma, they must be converted to a compound path before you export them.
There are also some best practices to keep in mind when creating icons. We recommend following the below guidelines to ensure the smoothest animation possible.
- Make sure the start and end icons have the same starting position.
- Check that both icons have the same number of points.
- Use filled icons (without cut-outs).
- Use several smaller shapes to create an SVG icon, as opposed to 1 larger shape.
- Scale shapes when resizing them to maintain their quality.
- Use the program's pixel view to ensure alignment with pixels on the artboard.
- If your icons are very different shapes, you can try these tips for an even smoother transition:
- Use morphed versions of the icons (a start icon that has been slightly morphed into the end icon and vice versa).
- Hide shapes from one icon on the other (e.g. hiding shapes from the end icon on the start icon).
Important:
We cannot provide support or troubleshooting for SVG files you create outside of Wix.
