1st Icons Overview

Icons for grocery websites and mobile apps.

Our icon set uses Font Awesome v6 as the base icon set and expands it with custom icons for proprietary Webstop products.

Example

<i class="fa-duotone fa-bug"></i>

Preferred UI Icons

The following icons are approved by our design team for general usage. More icons can be found at Font Awesome v6. You have all the Font Awesome v6 icons available, but the use of some of them is discouraged.

Account

fa-solid fa-user-circle

View Notes & Examples

Copy HTML

Copy CSS

Hamburger Menu

fa-regular fa-bars

View Notes & Examples

Copy HTML

Copy CSS

Arrow Up

fa-solid fa-angle-up

View Examples

Copy HTML

Copy CSS

Arrow Down

fa-solid fa-angle-down

View Examples

Copy HTML

Copy CSS

Arrow Right

fa-solid fa-angle-right

View Examples

Copy HTML

Copy CSS

Arrow Left

fa-solid fa-angle-left

View Examples

Copy HTML

Copy CSS

Check

fa-solid fa-check

View Examples

Copy HTML

Copy CSS

Info

fa-solid fa-info-circle

View Examples

Copy HTML

Copy CSS

Share

fa-solid fa-arrow-up-from-square

View Examples

Copy HTML

Copy CSS

Search

fa-solid fa-search

View Examples

Copy HTML

Copy CSS

External Link

fa-solid fa-external-link

View Examples

Copy HTML

Copy CSS

Settings

fa-solid fa-gear

View Examples

Copy HTML

Copy CSS

Bookmark

fa-solid fa-bookmark

View Examples

Copy HTML

Copy CSS

Edit

fa-solid fa-edit

View Examples

Copy HTML

Copy CSS

Vertical Ellipsis

fa-regular fa-ellipsis-vertical

View Notes & Examples

Copy HTML

Copy CSS

Ellipsis

fa-regular fa-ellipsis

View Notes & Examples

Copy HTML

Copy CSS

House

fa-solid fa-house

View Notes & Examples

Copy HTML

Copy CSS

Lock

fa-solid fa-lock

View Notes & Examples

Copy HTML

Copy CSS

Map Marked

fa-solid fa-map-marked-alt

View Examples

Copy HTML

Copy CSS

Map Marker

fa-solid fa-map-marker-alt

View Examples

Copy HTML

Copy CSS

Delete

fa-solid fa-minus-circle

View Examples

Copy HTML

Copy CSS

Play

fa-solid fa-play

View Examples

Copy HTML

Copy CSS

Sort

fa-solid fa-sort

View Examples

Copy HTML

Copy CSS

Sort Down

fa-solid fa-sort-down

View Examples

Copy HTML

Copy CSS

Sort Up

fa-solid fa-sort-up

View Examples

Copy HTML

Copy CSS

Thumbs Down

fa-solid fa-thumbs-down

View Examples

Copy HTML

Copy CSS

Thumbs Up

fa-solid fa-thumbs-up

View Examples

Copy HTML

Copy CSS

Toggle On

fa-solid fa-toggle-on

View Examples

Copy HTML

Copy CSS

Toggle Off

fa-solid fa-toggle-off

View Examples

Copy HTML

Copy CSS

Add or Create

fak fa-add-circle

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Add

fak fa-add-hexagon

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Add

fak fa-add-octagon

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Add

fak fa-add-square

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Add

fak fa-add

View Notes & Examples

Copy HTML

Copy CSS

Delete or Remove

fak fa-delete-circle

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Delete

fak fa-delete-hexagon

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Delete

fak fa-delete-octagon

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Delete

fak fa-delete-square

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Delete

fak fa-delete

View Notes & Examples

Copy HTML

Copy CSS

Edit or Update

fa-solid fa-edit

View Notes & Examples

Copy HTML

Copy CSS

View or Show

fa-solid fa-circle-chevron-right

View Notes & Examples

Copy HTML

Copy CSS

Alternative for View

fa-solid fa-square-chevron-right

View Notes & Examples

Copy HTML

Copy CSS

Alternative for View

fa-solid fa-chevron-right

View Notes & Examples

Copy HTML

Copy CSS

Cancel or Close

fak fa-cancel-circle

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Cancel

fak fa-cancel-hexagon

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Cancel

fak fa-cancel-octagon

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Cancel

fak fa-cancel-square

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Cancel

fak fa-cancel

View Notes & Examples

Copy HTML

Copy CSS

Sign-In & Login

fa-solid fa-person-to-portal

View Notes & Examples

Copy HTML

Copy CSS

Sign-Up & Registration

fa-solid fa-user-plus

View Notes & Examples

Copy HTML

Copy CSS

Alternative for Sign-In

fa-solid fa-person-walking-arrow-right

View Notes & Examples

Copy HTML

Copy CSS

Sign-Out & Logout

fa-solid fa-person-from-portal

View Notes & Examples

Copy HTML

Copy CSS

Edit Account

fa-solid fa-user-pen

View Notes & Examples

Copy HTML

Copy CSS

Account Confirmation

fa-solid fa-user-check

View Notes & Examples

Copy HTML

Copy CSS

Account Settings

fa-solid fa-user-gear

View Notes & Examples

Copy HTML

Copy CSS