Panel Icons Library

The SCAYLE Panel Icons Library includes a vast number of icons that are used by the SCAYLE Panel to give Add-ons the same look and feel.

Additionally, this package explains how to create Vue3 Icon components (see README.md file)

All icons

Copy Vue

activity

Copy Vue

add

Copy Vue

analytics

Copy Vue

app

Copy Vue

arrow-bottom-right

Copy Vue

arrow-circle-down

Copy Vue

arrow-circle-filled-down

Copy Vue

arrow-circle-filled-left

Copy Vue

arrow-circle-filled-right

Copy Vue

arrow-circle-filled-up

Copy Vue

arrow-circle-left

Copy Vue

arrow-circle-right

Copy Vue

arrow-circle-up

Copy Vue

arrow-down

Copy Vue

arrow-left-right

Copy Vue

arrow-left

Copy Vue

arrow-right

Copy Vue

arrow-up

Copy Vue

attach

Copy Vue

ban

Copy Vue

bars

Copy Vue

basket

Copy Vue

bell-add

Copy Vue

bell-disabled

Copy Vue

bell

Copy Vue

book-open

Copy Vue

bookmark-fill

Copy Vue

bookmark-off

Copy Vue

bookmark

Copy Vue

box-search

Copy Vue

box-success

Copy Vue

calculator

Copy Vue

calendar-in

Copy Vue

calendar-out

Copy Vue

calendar-time

Copy Vue

calendar

Copy Vue

carrier

Copy Vue

certificate

Copy Vue

channel

Copy Vue

chart-bars

Copy Vue

chart-pie

Copy Vue

chat-bubbles

Copy Vue

check-circle

Copy Vue

checkmark

Copy Vue

checkout-settings

Copy Vue

chevron-double-down

Copy Vue

chevron-double-left

Copy Vue

chevron-double-right

Copy Vue

chevron-double-up

Copy Vue

chevron-down

Copy Vue

chevron-left

Copy Vue

chevron-right

Copy Vue

chevron-up-down-table

Copy Vue

chevron-up-down

Copy Vue

chevron-up

Copy Vue

circle-outline-strip

Copy Vue

close

Copy Vue

cloud

Copy Vue

coffee

Copy Vue

connection-multi

Copy Vue

contact-badge

Copy Vue

contract

Copy Vue

convert

Copy Vue

copy

Copy Vue

crown

Copy Vue

dashboard

Copy Vue

data-table

Copy Vue

device-desktop

Copy Vue

device-mobile

Copy Vue

discount

Copy Vue

dollar-note

Copy Vue

download

Copy Vue

drag

Copy Vue

edit

Copy Vue

education

Copy Vue

email

Copy Vue

error-fill

Copy Vue

error

Copy Vue

expand

Copy Vue

external

Copy Vue

eye-striked

Copy Vue

eye

Copy Vue

file-csv

Copy Vue

file-pdf

Copy Vue

file-return-docs

Copy Vue

file-text

Copy Vue

file-xls

Copy Vue

filter

Copy Vue

flag

Copy Vue

folder-fill

Copy Vue

folder-open-fill

Copy Vue

folder

Copy Vue

forbidden-return-documents

Copy Vue

forward

Copy Vue

gift

Copy Vue

globe-checkmark

Copy Vue

globe

Copy Vue

half

Copy Vue

headset

Copy Vue

heart-fill

Copy Vue

heart

Copy Vue

id

Copy Vue

image-single

Copy Vue

image-stacked

Copy Vue

import

Copy Vue

info-fill

Copy Vue

info

Copy Vue

invoice

Copy Vue

key-framed

Copy Vue

key

Copy Vue

layout

Copy Vue

link-disconnect

Copy Vue

link

Copy Vue

list-attributes

Copy Vue

list-view

Copy Vue

location

Copy Vue

lock-open

Copy Vue

lock

Copy Vue

logic

Copy Vue

logistics-box-trolley

Copy Vue

logistics-boxes-crane

Copy Vue

loudspeaker

Copy Vue

loyalty

Copy Vue

luxury

Copy Vue

magic-wand

Copy Vue

mail-error

Copy Vue

menu

Copy Vue

minus

Copy Vue

money

Copy Vue

more-horizontal

Copy Vue

more

Copy Vue

nested-list-view

Copy Vue

notes

Copy Vue

off

Copy Vue

office

Copy Vue

order-e

Copy Vue

ordered-list

Copy Vue

outfit

Copy Vue

package

Copy Vue

page

Copy Vue

parcel-down

Copy Vue

parcel-search

Copy Vue

parcel

Copy Vue

paste

Copy Vue

pay

Copy Vue

payments

Copy Vue

percentage-circle

Copy Vue

percentage

Copy Vue

phone

Copy Vue

placeholder

Copy Vue

player-pause

Copy Vue

player-play

Copy Vue

polaroid

Copy Vue

product-import

Copy Vue

question-fill

Copy Vue

question-filled

Copy Vue

question

Copy Vue

refresh

Copy Vue

restore

Copy Vue

revert

Copy Vue

rule-engine

Copy Vue

save

Copy Vue

scan

Copy Vue

search

Copy Vue

send

Copy Vue

seo

Copy Vue

separate

Copy Vue

server

Copy Vue

settings-wheel

Copy Vue

settings

Copy Vue

share

Copy Vue

shirt-download

Copy Vue

shirt-new

Copy Vue

shirt-success

Copy Vue

shirt

Copy Vue

shrink

Copy Vue

smiley-average

Copy Vue

smiley-bad

Copy Vue

smiley-good

Copy Vue

social-facebook

Copy Vue

social-twitter

Copy Vue

sort-bottom-to-top

Copy Vue

sort-top-to-bottom

Copy Vue

sparkle-fill

Copy Vue

sparkle

Copy Vue

spelling-mistake

Copy Vue

stack

Copy Vue

star-fill

Copy Vue

star

Copy Vue

stopwatch

Copy Vue

store-location

Copy Vue

store

Copy Vue

structure-horizontal

Copy Vue

structure-vertical

Copy Vue

structure

Copy Vue

style

Copy Vue

success-fill

Copy Vue

success

Copy Vue

sust-cotton

Copy Vue

swap-horizontal

Copy Vue

swap-vertical

Copy Vue

tablet

Copy Vue

tag

Copy Vue

target

Copy Vue

task

Copy Vue

tax

Copy Vue

technology

Copy Vue

text-bold

Copy Vue

text-center

Copy Vue

text-italic

Copy Vue

text-justify

Copy Vue

text-left

Copy Vue

text-paragraph

Copy Vue

text-right

Copy Vue

text-underline

Copy Vue

text

Copy Vue

tile-view

Copy Vue

translate

Copy Vue

trash

Copy Vue

trend-down

Copy Vue

trend-up

Copy Vue

triangle-right

Copy Vue

truck

Copy Vue

two-fa-restore

Copy Vue

ufo

Copy Vue

undo

Copy Vue

user-add

Copy Vue

user-edit

Copy Vue

user-key

Copy Vue

user-merchant

Copy Vue

user-permissions

Copy Vue

user-remove

Copy Vue

user

Copy Vue

users-exchange

Copy Vue

users

Copy Vue

voucher

Copy Vue

warehouse

Copy Vue

warning-circle-fill

Copy Vue

warning-circle

Copy Vue

warning-fill

Copy Vue

warning

Copy Vue

webhook

Copy Vue

world

3.xx Release

Upgrade guide from version 2.2.0 to 3.0.0

To upgrade your panel-icons library, change the version for @scayle/panel-icons to "^3.0.0"

The size of individual Icons has been standardized (see table below)

Icon	Icon name	Icon	Icon name
	carrier		nested-list-view
	list-view		sust-cotton
	loyalty		tile-view

New Icons in version 3.0.0

Icon	Icon name	Icon	Icon name
	calculator		revert
	check-circle

New Icons in version 3.1.0

Icon	Icon name	Icon	Icon name
	payments

2.x.x Release

Upgrade guide from version 1.4.2 to 2.0.0

To upgrade your panel-icons library, change the version for @scayle/panel-icons to "^2.0.0"

• Icon prefix ic- has been removed for all icon names
• 14 Icons have been renamed, see list below!
• 27 new Icons have been added, see list below
• The edit icon graphic has been updated slightly
• All Icon files have been moved from img folder to icons folder
• Updated generatePanelIcons method in your vite.config.ts (see README.md file)

Changed icon names in Version 2.0.0

Icon	Old icon name	New icon name
	2fa-restore	two-fa-restore
	key-2	key-framed
	logistics-1	logistics-boxes-crane
	logistics-2	logistics-box-trolley
	arrow-down	chevron-down
	arrow-left	chevron-left
	arrow-up	chevron-up
	arrow-right	chevron-right
	arrow-down-double	chevron-double-down
	arrow-left-double	chevron-double-left
	arrow-up-double	chevron-double-up
	arrow-right-double	chevron-double-right
	arrow-up-down-table	chevron-up-down-table
	arrow-up-down	chevron-up-down

New Icons in version 2.0.0

Icon	Icon name	Icon	Icon name
	arrow-down		box-search
	arrow-left		box-success
	arrow-up		sparkle
	arrow-right		bookmark
	warning-circle		bookmark-off
	warning-circle-fill		bookmark-fill
	checkout-settings		placeholder
	ordered-list		magic-wand
	smiley-good		user-key
	smiley-average		discount
	smiley-bad		luxury
	outfit		sort-bottom-to-top
	store-location		sort-top-to-bottom
	office

New Icons in version 2.1.0

Icon	Icon name	Icon	Icon name
	arrow-circle-filled-down		mail-error
	arrow-circle-filled-left		package
	arrow-circle-filled-right		shirt-new
	arrow-circle-filled-up		sparkle-fill
	calendar-time		target
	certificate		user-add
	chart-bars		user-edit
	contact-badge		user-remove
	contract

New Icon in version 2.2.0

Icon	Icon name	Icon	Icon name
	shirt-download