x
1
2
3
4
5
6
7
8
9
10
11
<!-- Basic --><span class="icon icon--zap"></span><!-- Color --><span class="icon icon--zap" style="--icon-color: var(--color-text-negative)"></span><!-- Size --><span class="icon icon--zap" style="--icon-size: 2rem"></span><!-- Loading --><span class="icon icon--loading" style="--icon-size: 2rem"></span>1
2
3
4
5
6
7
8
9
10
11
12
<%# Basic %><span class="icon icon--zap"></span><%# Color %><span class="icon icon--zap" style="--icon-color: var(--color-text-negative)"></span><%# Size %><span class="icon icon--zap" style="--icon-size: 2rem"></span><%# Loading %><span class="icon icon--loading" style="--icon-size: 2rem"></span>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
.icon { background-color: var(--icon-color, currentColor); block-size: var(--icon-size, 1rem); display: inline-block; flex-shrink: 0; inline-size: var(--icon-size, 1rem); mask-image: var(--svg); mask-position: center; mask-repeat: no-repeat; mask-size: var(--icon-size, 1rem); pointer-events: none; user-select: none;}img.icon { background: none;}.icon--loading { --svg: url("loading.svg"); animation: var(--animate-spin); animation-duration: 1s;}/***************************************************************** Lucide (https://lucide.dev)* Open-source icon library with a consistent style*****************************************************************/.icon--camera { --svg: url("camera.svg"); }.icon--chevron-down { --svg: url("chevron-down.svg"); }.icon--chevron-left { --svg: url("chevron-left.svg"); }.icon--chevron-right { --svg: url("chevron-right.svg"); }.icon--chevrons-up-down { --svg: url("chevrons-up-down.svg"); }.icon--circle-alert { --svg: url("circle-alert.svg"); }.icon--circle-check { --svg: url("circle-check.svg"); }.icon--copy { --svg: url("copy.svg"); }.icon--download { --svg: url("download.svg"); }.icon--ellipsis { --svg: url("ellipsis.svg"); }.icon--minus { --svg: url("minus.svg"); }.icon--moon { --svg: url("moon.svg"); }.icon--panel-left { --svg: url("panel-left.svg"); }.icon--search { --svg: url("search.svg"); }.icon--share { --svg: url("share.svg"); }.icon--sun { --svg: url("sun.svg"); }.icon--x { --svg: url("x.svg"); }/***************************************************************** Showcase icons*****************************************************************/.icon--app-window { --svg: url("app-window.svg"); }.icon--arrow-down { --svg: url("arrow-down.svg"); }.icon--arrow-left { --svg: url("arrow-left.svg"); }.icon--arrow-right { --svg: url("arrow-right.svg"); }.icon--arrow-up { --svg: url("arrow-up.svg"); }.icon--arrow-up-right { --svg: url("arrow-up-right.svg"); }.icon--badge-check { --svg: url("badge-check.svg"); }.icon--bell { --svg: url("bell.svg"); }.icon--bluetooth { --svg: url("bluetooth.svg"); }.icon--book-open { --svg: url("book-open.svg"); }.icon--bookmark { --svg: url("bookmark.svg"); }.icon--building-2 { --svg: url("building-2.svg"); }.icon--bot { --svg: url("bot.svg"); }.icon--calculator { --svg: url("calculator.svg"); }.icon--calendar { --svg: url("calendar.svg"); }.icon--chart-pie { --svg: url("chart-pie.svg"); }.icon--chevrons-left { --svg: url("chevrons-left.svg"); }.icon--chevrons-right { --svg: url("chevrons-right.svg"); }.icon--circle { --svg: url("circle.svg"); }.icon--circle-check-big { --svg: url("circle-check-big.svg"); }.icon--circle-fading-arrow-up { --svg: url("circle-fading-arrow-up.svg"); }.icon--circle-fading-plus { --svg: url("circle-fading-plus.svg"); }.icon--circle-off { --svg: url("circle-off.svg"); }.icon--circle-question-mark { --svg: url("circle-question-mark.svg"); }.icon--circle-slash { --svg: url("circle-slash.svg"); }.icon--code { --svg: url("code.svg"); }.icon--credit-card { --svg: url("credit-card.svg"); }.icon--dot { --svg: url("dot.svg"); }.icon--external-link { --svg: url("external-link.svg"); }.icon--frame { --svg: url("frame.svg"); }.icon--gallery-vertical-end { --svg: url("gallery-vertical-end.svg"); }.icon--git-branch { --svg: url("git-branch.svg"); }.icon--git-fork { --svg: url("git-fork.svg"); }.icon--grip-vertical { --svg: url("grip-vertical.svg"); }.icon--inbox { --svg: url("inbox.svg"); }.icon--log-out { --svg: url("log-out.svg"); }.icon--mail { --svg: url("mail.svg"); }.icon--map { --svg: url("map.svg"); }.icon--message-square { --svg: url("message-square.svg"); }.icon--pencil { --svg: url("pencil.svg"); }.icon--plus { --svg: url("plus.svg"); }.icon--settings { --svg: url("settings.svg"); }.icon--settings-2 { --svg: url("settings-2.svg"); }.icon--shield-alert { --svg: url("shield-alert.svg"); }.icon--smile { --svg: url("smile.svg"); }.icon--square-terminal { --svg: url("square-terminal.svg"); }.icon--timer { --svg: url("timer.svg"); }.icon--trash { --svg: url("trash.svg"); }.icon--trash-2 { --svg: url("trash-2.svg"); }.icon--triangle-alert { --svg: url("triangle-alert.svg"); }.icon--user { --svg: url("user.svg"); }.icon--wallet { --svg: url("wallet.svg"); }.icon--zap { --svg: url("zap.svg"); }
Java Script is not required or multiple files are needed, check the notes.