ICONS
Shopping Cart Icons
These icons are designed for various actions users can take in relation to their shopping cart. Common symbols include a "plus" sign to add items to the cart, a "minus" or "remove" button to delete individual items, a "trash" icon to clear all items from the cart, and a "shopping cart" icon to view the cart itself. Each icon is tailored to streamline the shopping experience by making cart management intuitive and visually recognizable.
Add to Cart Icon: Typically depicted as a shopping cart with a plus sign, this icon allows users to add items to their cart.
Remove from Cart Icon: Often represented as a shopping cart with a minus sign, this icon allows users to remove items from their cart.
Clear Cart Icon: Represented by a trash can or an empty shopping cart, this icon enables users to clear all items from their shopping cart.
Go to Cart Icon: Usually a shopping cart symbol, this icon directs users to their cart where they can review their selected items and proceed to checkout.
Filter and Sort Icons
Filter icons often appear as a funnel shape, signaling options to refine a product list by criteria like price range, category, or brand. Sort icons include arrows or an alphabetical/numbered list to indicate ascending or descending order, and might display options like "low to high" or "newest first." These icons provide users with quick, straightforward ways to adjust displayed content based on their preferences.
Filter Icon: Often represented by a funnel, this icon signifies the ability to narrow down search results based on specific criteria such as price range, brand, or features.
Sort Icon: Usually shown as an arrow pointing up or down, this icon allows users to sort items in ascending or descending order (e.g., price, popularity, or rating).
Personal Information Icons
Icons representing personal information fields, such as mailing address, email, credit card, and a gift option at checkout, enhance usability by clearly symbolizing specific details or actions for the user. These icons serve as visual cues to help users quickly identify information fields or options, promoting a smoother and more intuitive experience in forms or checkout flows.
Mailing Address Icon: Represented here as an envelope, this icon indicates fields for entering a postal address.
Email Icon: Shown as an "@" symbol, this icon designates fields for email entry.
Credit Card Icon: Displayed as a stylized card image, this icon is used in payment sections, guiding users to enter payment information.
Gift Icon: Often represented by a gift box, this icon allows users to select a gifting option, commonly found in e-commerce checkout.
Media Icons
Media icons are universal symbols related to audio and video control. The "play" button, typically a triangle, signifies the start of media playback, while a "pause" icon (two vertical lines) stops playback temporarily. "Full screen" and "exit full screen" icons, located in screen corners, allow users to toggle the media view size. Speaker icons, displayed as small speaker images, indicate volume controls, including options to mute or unmute audio.
Play Button Icon: The triangle pointing to the right, universally recognized for starting video or audio playback.
Full Screen Icon: Represented by a square or four arrows pointing outward, this icon allows users to switch to full-screen mode for videos or presentations.
Exit Full Screen Icon: Often shown as a square with an inward arrow, this icon lets users exit full-screen mode and return to the standard window size.
Muted Speaker: Depicted as a speaker with a line through it, indicating no sound.
Unmuted Speaker: Shown as a regular speaker, indicating that sound is enabled.
Volume Icon: A speaker with sound waves or bars, indicating varying levels of audio volume.
Like Icons
Like icons usually take the shape of a heart or thumbs-up to represent favoriting or saving items, such as products in a wish list. A filled icon signifies that an item has been liked or saved, while an empty icon indicates it hasn’t been. Un-liking or removing an item from the list reverts the icon to its empty state.
Like Icon: Typically represented by a heart or thumbs-up, this icon allows users to express approval of a product or content, often adding it to a wishlist or favorites list.
Unlike Icon: Shown as an empty heart or thumbs-down, this icon lets users remove their like or save the item to a list.
Rating Icon
Rating icons are typically represented by stars, with five stars indicating the maximum rating. They are often filled in a progression from left to right to show the average rating or user input, with each filled star corresponding to one rating point. Users recognize this icon format as a quick gauge of product quality or satisfaction based on user feedback.
Star Rating Icon: Usually displayed as five stars, this icon allows users to rate something, with filled or empty stars indicating the level of satisfaction, from 1 to 5 stars. Users can select the number of stars they wish to give based on their experience.
Page Icons
Page icons use distinct symbols to represent different sections of a site or app, enhancing navigation. An "explore" icon, often a compass or magnifying glass, directs users to discovery sections; a "settings" icon, often a gear, leads to configuration options; a "quick deals" icon, such as a lightning bolt, signals time-sensitive promotions; and "categories" icons provide a way to browse items by type.
Explore Icon: Often represented by a magnifying glass or globe, this icon directs users to browse a variety of items or content.
Settings Icon: Usually depicted as a gear or cog, this icon leads users to the settings page to adjust preferences or configurations.
Quick Deals Icon: Often shown as a tag or sale price, this icon directs users to special offers or discounted items.
Categories Icon: Represented by a list or grid of items, this icon allows users to explore different categories of products or content.
Other UI Icons
These icons serve a variety of functions to aid with general app or website navigation. A "trash can" icon, for example, is used to delete items permanently. An "X" or minus symbol closes or removes items, such as closing a modal or removing a selected option. A plus symbol, on the other hand, allows users to add new items or elements, like adding a new entry to a list or selecting a new product size.
Trash Can Icon: Represented by a trash can or bin, this icon is used for deleting items, whether it's a file, message, or product.
X Icon: Typically a cross symbol, this icon is used for closing windows, removing items from a list, or canceling actions.
Minus Icon: Often displayed as a dash or negative sign, this icon allows users to remove or subtract items from a list or field.
Plus Icon: Shown as a plus sign, this icon is used for adding items or expanding content. It is commonly used for adding products to a cart, expanding menu options, or increasing quantities.
This work includes icons from the Dazzle Line Icons Collection by Dazzle UI, used under the Creative Commons Attribution License.
The icon pack can be found here: https://www.svgrepo.com/collection/dazzle-line-icons/