Css Zero Showcase

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- Default -->
<span class="icon icon--zap"></span>
<!-- Color -->
<span class="icon icon--zap" style="--icon-color: var(--color-negative)"></span>
<!-- Size -->
<span class="icon icon--zap"></span>
<span class="icon icon--zap" style="--icon-size: 1.5rem"></span>
<span class="icon icon--zap" style="--icon-size: 2rem"></span>
<!-- Loading -->
<span class="icon icon--loading"></span>
1
2
3
4
5
6
7
8
9
10
11
12
13
<%# Default %>
<span class="icon icon--zap"></span>
<%# Color %>
<span class="icon icon--zap" style="--icon-color: var(--color-negative)"></span>
<%# Size %>
<span class="icon icon--zap"></span>
<span class="icon icon--zap" style="--icon-size: 1.5rem"></span>
<span class="icon icon--zap" style="--icon-size: 2rem"></span>
<%# Loading %>
<span class="icon icon--loading"></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
.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-repeat: no-repeat;
  mask-size: cover;
  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--terminal { --svg: url("terminal.svg"); }
.icon--circle-alert { --svg: url("circle-alert.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--search { --svg: url("search.svg"); }
.icon--x { --svg: url("x.svg"); }
.icon--copy { --svg: url("copy.svg"); }
.icon--download { --svg: url("download.svg"); }
.icon--share { --svg: url("share.svg"); }
.icon--ellipsis { --svg: url("ellipsis.svg"); }
.icon--move { --svg: url("move.svg"); }
.icon--camera { --svg: url("camera.svg"); }
.icon--minus { --svg: url("minus.svg"); }
/****************************************************************
* Showcase icons
*****************************************************************/
.icon--circle-plus { --svg: url("circle-plus.svg"); }
.icon--calendar { --svg: url("calendar.svg"); }
.icon--smile { --svg: url("smile.svg"); }
.icon--calculator { --svg: url("calculator.svg"); }
.icon--user { --svg: url("user.svg"); }
.icon--credit-card { --svg: url("credit-card.svg"); }
.icon--settings { --svg: url("settings.svg"); }
.icon--circle-check { --svg: url("circle-check.svg"); }
.icon--circle-user { --svg: url("circle-user.svg"); }
.icon--sliders-vertical { --svg: url("sliders-vertical.svg"); }
.icon--zap { --svg: url("zap.svg"); }
.icon--app-window { --svg: url("app-window.svg"); }
.icon--code { --svg: url("code.svg"); }
.icon--italic { --svg: url("italic.svg"); }
.icon--bold { --svg: url("bold.svg"); }
.icon--circle-slash { --svg: url("circle-slash.svg"); }
.icon--gallery-vertical-end { --svg: url("gallery-vertical-end.svg"); }
.icon--square-terminal { --svg: url("square-terminal.svg"); }
.icon--bot { --svg: url("bot.svg"); }
.icon--book-open { --svg: url("book-open.svg"); }
.icon--settings-2 { --svg: url("settings-2.svg"); }
.icon--frame { --svg: url("frame.svg"); }
.icon--chart-pie { --svg: url("chart-pie.svg"); }
.icon--map { --svg: url("map.svg"); }
.icon--timer { --svg: url("timer.svg"); }
.icon--circle-check-big { --svg: url("circle-check-big.svg"); }
.icon--circle-question-mark { --svg: url("circle-question-mark.svg"); }
.icon--circle { --svg: url("circle.svg"); }
.icon--circle-off { --svg: url("circle-off.svg"); }
.icon--arrow-up { --svg: url("arrow-up.svg"); }
.icon--arrow-down { --svg: url("arrow-down.svg"); }
.icon--arrow-right { --svg: url("arrow-right.svg"); }
.icon--chevrons-right { --svg: url("chevrons-right.svg"); }
.icon--chevrons-left { --svg: url("chevrons-left.svg"); }
Java Script is not required or multiple files are needed, check the notes.

Dependencies