Overview
Wishlist icons are one of the most visible UI elements on your storefront. Flits lets you choose between built-in icons (heart, star, bookmark) or upload your own SVG for full brand control. This article explains how to select, customize, and troubleshoot wishlist icons.
1. Choosing Icon Type
Flits provides multiple default icon styles:
Heart (outline + filled) → most common in eCommerce
Star → useful for favorites or rating-like UI
Bookmark → minimalistic, editorial-like feel
How to select:
Open Flits Wishlist > Wishlist Design
Select Product Page or Collection Page
Choose Icon Type → Default / Custom SVG
2. Using Custom SVG Icons
For full design freedom, upload your own SVG file.
Requirements:
SVG format only
Solid or outline styles supported
Should scale well at 24–48px
How to upload:
Choose Custom SVG
Upload your SVG
Adjust size, color, and active (filled) state
Tip: Use a filled version for “added to wishlist” state.
3. Icon States
Icons support two visual states:
Inactive (not saved) → outline or unfilled
Active (saved) → filled or highlighted
Merchants can customize both for consistent branding.
4. Troubleshooting Icon Issues
If the icon looks blurry → ensure SVG is not converted to PNG
If icon doesn’t change on click → check theme conflicts or JS overrides
If icon overlaps text → adjust size or spacing
For assistance or additional information on the Wishlist App, our team is available at support@getflits.com.