Appearance
Customization: Icons
How icon selection, custom icons, and animations work across the wishlist's buttons and widgets.
Overview
Every wishlist button and the header icon use the same underlying icon system: pick from a built-in set, or upload your own. Buttons additionally support an animation that plays when a shopper saves an item.
Benefits
- Use a consistent icon style across your entire wishlist experience, or brand it with your own custom icon
- Add a satisfying animation moment when shoppers save a product
- No design or development work needed to change icons
Where to Find It
Apps ↓ BRIX: Wishlist Plus ↓ Settings ↓ Any feature → Customize ↓ Icon section
How to Use
- Open any Customize screen with an Icon section (product grid button, product page button, floating button, or wishlist header icon).
- Choose an Icon style: Heart, Star, Bookmark, or Custom.
- If Custom, upload your own SVG file (header icon also accepts pasted SVG code).
- On buttons, choose an Icon animation to play when the item is saved.
- Use Preview animation in the live preview to test it.
- Save.
Available Settings
| Setting | Description |
|---|---|
| Icon style | Heart, Star, Bookmark, or Custom (default: Heart everywhere) |
| Custom icon | SVG upload, maximum 100 KB, required when Icon style is Custom |
| Icon animation (buttons only) | None, Fill, Cross fade, Scale swap, Rotate swap, Flip 3D, Slide left, Radial, Wipe right, Swing, Bounce, or Flip |
| Icon size | A pixel-range slider, with a different min/max per feature |
| Icon color / Icon color (active) | Separate colors for saved vs. unsaved states |
Best Practices
- Use the same icon style (e.g. Heart) across the product grid button, product page button, floating button, and header icon for a consistent experience.
- If uploading a custom icon, use a simple, single-color SVG — complex multi-color icons may not display as expected in the "active" color state.
- Choose a subtle animation (like Fill) for a polished feel, or a more playful one (like Bounce or Flip 3D) to draw more attention to the save action.
Notes
- Custom icons must be SVG format and 100 KB or smaller.
- The wishlist header icon is the only surface that accepts pasted raw SVG code in addition to file upload.
- Animation options are only available on buttons (product grid, product page, floating) — the header icon has no click animation since it doesn't perform a save action itself.
Troubleshooting
My custom icon won't upload. Confirm the file is a valid SVG and under 100 KB.
My custom icon looks wrong in its "active" color. Custom SVGs with hardcoded colors or multiple fill colors may not respond correctly to the active-color setting. Simplify the SVG to a single fill color and try again.
The animation doesn't play on the storefront. Confirm Icon animation isn't set to "None," and that you saved your changes.