Popular Icons
Popular Icons for UI elements.
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="fak fa-add-circle"></i>Preferred Popular 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.
Arrow Up
fa-solid fa-angle-up
Copy HTML
Copy CSS
Arrow Down
fa-solid fa-angle-down
Copy HTML
Copy CSS
Arrow Right
fa-solid fa-angle-right
Copy HTML
Copy CSS
Arrow Left
fa-solid fa-angle-left
Copy HTML
Copy CSS
Help
fa-solid fa-question-circle
Copy HTML
Copy CSS
Info
fa-solid fa-info-circle
Copy HTML
Copy CSS
Share
fa-solid fa-arrow-up-from-square
Copy HTML
Copy CSS
Search
fa-solid fa-search
Copy HTML
Copy CSS
Cloud
fa-solid fa-cloud
Copy HTML
Copy CSS
Cloud Download
fa-solid fa-cloud-download
Copy HTML
Copy CSS
Cloud Upload
fa-solid fa-cloud-upload
Copy HTML
Copy CSS
Add or Create
fak fa-add-circle
Copy HTML
Copy CSS
Delete or Remove
fak fa-delete-circle
Copy HTML
Copy CSS
Edit or Update
fa-solid fa-edit
Copy HTML
Copy CSS
View or Show
fa-solid fa-circle-chevron-right
Copy HTML
Copy CSS
Cancel or Close
fak fa-cancel-circle
Copy HTML
Copy CSS
Sign-In & Login
fa-solid fa-person-to-portal
Copy HTML
Copy CSS
Sign-Up & Registration
fa-solid fa-user-plus
Copy HTML
Copy CSS
Sign-Out & Logout
fa-solid fa-person-from-portal
Copy HTML
Copy CSS
Edit Account
fa-solid fa-user-pen
Copy HTML
Copy CSS
Account Confirmation
fa-solid fa-user-check
Copy HTML
Copy CSS
Account Settings
fa-solid fa-user-gear
Copy HTML
Copy CSS
Arrow Up
<i class="fa-solid fa-angle-up"></i>
fa-solid fa-angle-up
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: up arrow direction
Categories: UI, popular
Arrow Down
<i class="fa-solid fa-angle-down"></i>
fa-solid fa-angle-down
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: down arrow direction
Categories: UI, popular
Arrow Right
<i class="fa-solid fa-angle-right"></i>
fa-solid fa-angle-right
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: right forward arrow direction next
Categories: UI, popular
Arrow Left
<i class="fa-solid fa-angle-left"></i>
fa-solid fa-angle-left
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: right back arrow direction return
Categories: UI, popular
Help
<i class="fa-solid fa-question-circle"></i>
fa-solid fa-question-circle
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: help question ?
Categories: symbols, popular
Info
<i class="fa-solid fa-info-circle"></i>
fa-solid fa-info-circle
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: Info
Categories: UI, popular
Share
<i class="fa-solid fa-arrow-up-from-square"></i>
fa-solid fa-arrow-up-from-square
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: share social
Categories: UI, popular
Search
<i class="fa-solid fa-search"></i>
fa-solid fa-search
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: search magnifying inspect filter look up lookup find
Categories: UI, popular
Cloud
<i class="fa-solid fa-cloud"></i>
fa-solid fa-cloud
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: cloud internet
Categories: admin, popular
Cloud Download
<i class="fa-solid fa-cloud-download"></i>
fa-solid fa-cloud-download
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: cloud internet download
Categories: admin, popular
Cloud Upload
<i class="fa-solid fa-cloud-upload"></i>
fa-solid fa-cloud-upload
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: cloud internet upload
Categories: admin, popular
Add or Create
<i class="fak fa-add-circle"></i>
fak fa-add-circle
Our preferred icon for adding a new record in CRUD style operations.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: add create new plus expand circle solid
Categories: admin, UI, popular, CRUD, CRUD-preferred
Delete or Remove
<i class="fak fa-delete-circle"></i>
fak fa-delete-circle
Our preferred icon for deleting a record in CRUD style operations.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: delete remove end contract collapse destroy minus solid
Categories: admin, UI, popular, CRUD, CRUD-preferred
Edit or Update
<i class="fa-solid fa-edit"></i>
fa-solid fa-edit
Our preferred icon for editing an existing record in CRUD style operations.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: edit pencil update modify
Categories: admin, UI, popular, CRUD, CRUD-preferred
View or Show
<i class="fa-solid fa-circle-chevron-right"></i>
fa-solid fa-circle-chevron-right
Our preferred icon for displaying an existing record in CRUD style operations.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: read show view display visit select go
Categories: admin, UI, popular, CRUD, CRUD-preferred
Cancel or Close
<i class="fak fa-cancel-circle"></i>
fak fa-cancel-circle
For canceling a process or modal. Not delete.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: cancel close end hide remove escape return undo
Categories: admin, UI, popular
Sign-In & Login
<i class="fa-solid fa-person-to-portal"></i>
fa-solid fa-person-to-portal
The preferred icon for Sign-In and Login.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: user login signin log-in sign-in consumer account
Categories: UI, users, popular
Sign-Up & Registration
<i class="fa-solid fa-user-plus"></i>
fa-solid fa-user-plus
The preferred icon for creating a new consumer account.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: user signup sign-up registration register consumer account
Categories: UI, users, popular
Sign-Out & Logout
<i class="fa-solid fa-person-from-portal"></i>
fa-solid fa-person-from-portal
The preferred icon for Sign-Out and Logout.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: user logout signout log-out sign-out consumer account
Categories: UI, users, popular
Edit Account
<i class="fa-solid fa-user-pen"></i>
fa-solid fa-user-pen
The preferred icon for Profile Updates.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: user profile update edit consumer account
Categories: UI, users, popular
Account Confirmation
<i class="fa-solid fa-user-check"></i>
fa-solid fa-user-check
The preferred icon for successful consumer account interactions.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: user confirmation success consumer account
Categories: UI, users, popular
Account Settings
<i class="fa-solid fa-user-gear"></i>
fa-solid fa-user-gear
The preferred icon for editing consumer settings or options.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: user settings consumer account
Categories: UI, users, popular
Alternatives to Popular Icons
For most uses you should use the Popular Icons listed above. The following icons are are available for unusual use cases or to match specific branding requirements.
Alternative for Add
fak fa-add-hexagon
Copy HTML
Copy CSS
Alternative for Add
fak fa-add-octagon
Copy HTML
Copy CSS
Alternative for Add
fak fa-add-square
Copy HTML
Copy CSS
Alternative for Add
fak fa-add
Copy HTML
Copy CSS
Alternative for Delete
fak fa-delete-hexagon
Copy HTML
Copy CSS
Alternative for Delete
fak fa-delete-octagon
Copy HTML
Copy CSS
Alternative for Delete
fak fa-delete-square
Copy HTML
Copy CSS
Alternative for Delete
fak fa-delete
Copy HTML
Copy CSS
Alternative for View
fa-solid fa-square-chevron-right
Copy HTML
Copy CSS
Alternative for Cancel
fak fa-cancel-hexagon
Copy HTML
Copy CSS
Alternative for Cancel
fak fa-cancel-octagon
Copy HTML
Copy CSS
Alternative for Cancel
fak fa-cancel-square
Copy HTML
Copy CSS
Alternative for Cancel
fak fa-cancel
Copy HTML
Copy CSS
Alternative for Sign-In
fa-solid fa-person-walking-arrow-right
Copy HTML
Copy CSS
Alternative for Add
<i class="fak fa-add-hexagon"></i>
fak fa-add-hexagon
An alternative icon for adding a new record in CRUD style operations. We recommend using the preferred icon `fa-add-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: add create new plus expand solid
Categories: admin, UI, CRUD-alt, popular-alt
Alternative for Add
<i class="fak fa-add-octagon"></i>
fak fa-add-octagon
An alternative icon for adding a new record in CRUD style operations. We recommend using the preferred icon `fa-add-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: add create new plus expand solid
Categories: admin, UI, CRUD-alt, popular-alt
Alternative for Add
<i class="fak fa-add-square"></i>
fak fa-add-square
An alternative icon for adding a new record in CRUD style operations. We recommend using the preferred icon `fa-add-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: add create new plus expand solid
Categories: admin, UI, CRUD-alt, popular-alt
Alternative for Add
<i class="fak fa-add"></i>
fak fa-add
An alternative icon for adding a new record in CRUD style operations. We recommend using the preferred icon `fa-add-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: add create new plus expand solid
Categories: admin, UI, CRUD-alt, popular-alt
Alternative for Delete
<i class="fak fa-delete-hexagon"></i>
fak fa-delete-hexagon
An alternative icon for deleting a record in CRUD style operations. We recommend using the preferred icon `fa-delete-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: delete remove end contract collapse destroy minus solid
Categories: admin, UI, CRUD-alt, popular-alt
Alternative for Delete
<i class="fak fa-delete-octagon"></i>
fak fa-delete-octagon
An alternative icon for deleting a record in CRUD style operations. We recommend using the preferred icon `fa-delete-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: delete remove end contract collapse destroy minus solid
Categories: admin, UI, CRUD-alt, popular-alt
Alternative for Delete
<i class="fak fa-delete-square"></i>
fak fa-delete-square
An alternative icon for deleting a record in CRUD style operations. We recommend using the preferred icon `fa-delete-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: delete remove end contract collapse destroy minus solid
Categories: admin, UI, CRUD-alt, popular-alt
Alternative for Delete
<i class="fak fa-delete"></i>
fak fa-delete
An alternative icon for deleting a record in CRUD style operations. We recommend using the preferred icon `fa-delete-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: delete remove end contract collapse destroy minus solid
Categories: admin, UI, CRUD-alt, popular-alt
Alternative for View
<i class="fa-solid fa-square-chevron-right"></i>
fa-solid fa-square-chevron-right
An alternative icon for displaying a record in CRUD style operations. We recommend using the preferred icon `fa-circle-chevron-right`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: read show view display visit select go
Categories: admin, UI, CRUD-alt, popular-alt
Alternative for Cancel
<i class="fak fa-cancel-hexagon"></i>
fak fa-cancel-hexagon
An alternative icon for canceling an action or closing a window. We recommend using the preferred icon `fa-cancel-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: cancel close end hide remove escape return undo
Categories: admin, UI, popular-alt
Alternative for Cancel
<i class="fak fa-cancel-octagon"></i>
fak fa-cancel-octagon
An alternative icon for canceling an action or closing a window. We recommend using the preferred icon `fa-cancel-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: cancel close end hide remove escape return undo
Categories: admin, UI, popular-alt
Alternative for Cancel
<i class="fak fa-cancel-square"></i>
fak fa-cancel-square
An alternative icon for canceling an action or closing a window. We recommend using the preferred icon `fa-cancel-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: cancel close end hide remove escape return undo
Categories: admin, UI, popular-alt
Alternative for Cancel
<i class="fak fa-cancel"></i>
fak fa-cancel
An alternative icon for canceling an action or closing a window. We recommend using the preferred icon `fa-cancel-circle`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: cancel close end hide remove escape return undo
Categories: admin, UI, popular-alt
Alternative for Sign-In
<i class="fa-solid fa-person-walking-arrow-right"></i>
fa-solid fa-person-walking-arrow-right
An alternative icon for Sign-In & Login. We recommend using the preferred icon `fa-person-to-portal`.
Examples
Example
Example
Example
duotone
duotone
duotone
solid
solid
solid
regular
regular
regular
Search Terms: user login signin log-in sign-in consumer account
Categories: UI, users, popular-alt