-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.njk
More file actions
686 lines (585 loc) · 42.1 KB
/
index.njk
File metadata and controls
686 lines (585 loc) · 42.1 KB
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
---
title: Lightning Fast Utility Generator for Sass
layout: layouts/base.njk
---
<div class="overflow-hidden">
<section>
<div class="px-20 sm.px-32">
<div class="relative max-w-896 lg.max-w-1152 mx-auto pt-12 sm.pt-32">
<nav class="mb-56 sm.mb-96 top-n1 relative z-2">
<div class="flex align-items-center justify-content-between py-10 mx-auto">
<div class="w-256 flex align-items-center">
<a href="/" class="inline-flex align-items-center text-lg semibold tracking-tight">
<img src="/assets/img/uniform-logo-white.svg" class="h-20 sm.h-24 mr-6">
<span class="relative mt-n6 color-heading font-xs bold tracking-loose">
beta
</span>
</a>
</div>
<div class="hidden sm.flex align-items-center justify-content-end gutter-x-24">
<a class="text-sm medium color-pink-200 color-opacity-80 hover.color-opacity-100">
Find icons
</a>
<a class="text-sm medium color-pink-200 color-opacity-80 hover.color-opacity-100">
Request an icon
</a>
<a class="text-sm medium color-pink-200 color-opacity-80 hover.color-opacity-100">
Docs
</a>
<a class="flex align-items-center medium color-white hover.color-white">
<ion-icon name="logo-github" class="w-28 h-28"></ion-icon>
</a>
</div>
<div class="flex sm.hidden align-items-center md.w-100p gap-20">
<a class="flex align-items-center medium color-white hover.color-white">
<ion-icon name="logo-github" class="w-28 h-28"></ion-icon>
</a>
{# <button class="h-32 flex md.hidden flex-col gap-4 align-items-center justify-content-center" @click="dialogs.mobileNav = true">
<div class="h-2 w-20 bg-pink-300"></div>
<div class="h-2 w-20 bg-pink-300"></div>
<div class="h-2 w-20 bg-pink-300"></div>
</button> #}
</div>
</div>
</nav>
<div class="hero-frame-left">
<img src="/assets/img/hero-frame-left.svg" class="w-512">
</div>
<div class="hero-frame-right">
<img src="/assets/img/hero-frame-right.svg" class="w-512">
</div>
<div class="glass-keylight is-hero">
<div class="glass-keylight-outer">
<div class="glass-keylight-inner">
</div>
</div>
</div>
<div class="relative z-4">
{# <div class="sm.flex justify-content-center mb-28 fade-in opacity-0" style="--animate-delay: .8s;">
<a href="https://www.producthunt.com/posts/uniform-css?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-uniform-css" class="inline-flex align-items-center text-lg semibold tracking-tight">
<img src="/assets/img/featured.svg" class="max-w-192">
</a>
</div> #}
<div class="grid grid-cols-12">
<div class="col-12 sm.col-7">
<div class="flex justify-content-center sm.justify-content-start">
<div class="inline-flex align-items-center bg-white bg-opacity-8 mb-14 px-18 py-4 semibold text-sm radius-full color-white">
<span>By the makers of <a class="https://uniformcss.com" target="_blank">Uniform CSS</a></span>
</div>
</div>
<h1 class="font-6xl sm.font-7xl md.font-8xl lg.font-9xl leading-110 extrabold mb-24 tracking-tighter color-heading text-center sm.text-left">
<span class="color-heading-accent">Open source <br class="hidden sm.inline">universal icons</span> made for modern <br class="hidden md.inline lg.hidden">UI design
</h1>
<p class="text-lg sm.text-lg md.text-lg text-center sm.text-left mx-auto sm.mx-0 max-w-512 tracking-tight mb-32 sm.mb-48 color-paragraph">
A fully customizable, consistently designed neutral icon library built to enhance modern websites and pixel-perfect UIs.
</p>
<div class="flex flex-col sm.flex-row gap-20 mb-72">
<a href="/explorer" class="inline-flex align-items-center justify-content-center h-40 px-16 color-black bg-yellow-300 hover.bg-yellow-400 transition-100 radius-md semibold text-md">
View icon explorer
</a>
<span class="inline-flex align-items-center justify-content-center color-white color-opacity-40">or</span>
<a href="#" class="inline-flex align-items-center justify-content-center color-white transition-100 radius-md semibold text-md">
<span>Download latest <span class="regular color-white color-opacity-60">v0.1.0</span></span>
</a>
</div>
</div>
<div class="col-12 sm.col-5 flex justify-content-center relative pointer-events-none">
<img src="/assets/img/hero-splash.svg" class="max-w-none w-640 ml-32 sm.ml-256 md.ml-320 lg.ml-96 relative mt-n112">
</div>
</div>
</div>
</div>
</div>
<div class="relative z-4 px-20 sm.px-32">
<div class="max-w-896 lg.max-w-1152 mx-auto">
<div class="flex flex-wrap justify-content-center sm.grid grid-cols-2 sm.grid-cols-2 gap-48 sm.gap-36 md.gap-24 mb-96 lg.mb-64">
<div class="flex flex-col md.flex-row align-items-start gap-28">
<div class="flex align-items-center justify-content-center flex-none w-112 h-112 ml-n16 md.ml-0 md.w-160">
<img src="/assets/img/hero-explorer.svg" class="w-144 md.w-auto lg.w-auto relative top-10">
</div>
<div>
{# <div class="inline-block radius-full flex align-items-center justify-content-center mb-12 px-6 py-4 border-1 border-teal-400 text-2xs leading-100 bold tracking-loose color-teal-200 bg-teal-400 bg-opacity-40">NEW</div> #}
<h3 class="color-heading text-xl leading-120 mb-12 bold"><span class="color-heading-accent">Customize and search</span> <br class="hidden sm.inline"> our entire icon library</h3>
<p class="color-paragraph text-md mb-16 max-w-448">Select your style and find the perfect icon neatly displayed using our new icon explorer.</p>
<a class="text-md bold color-white">View icon explorer <ion-icon name="arrow-forward" class="w-18 h-18 ml-4 color-yellow-300"></ion-icon></a>
</div>
</div>
<div class="flex flex-col md.flex-row align-items-start gap-28 md.gap-10">
<div class="flex align-items-center justify-content-center flex-none w-112 h-112 ml-n16 sm.ml-0 sm.w-80 md.w-160">
<img src="/assets/img/hero-figma.svg" class="w-80 sm.w-80 md.w-auto lg.w-auto relative top-10">
</div>
<div>
{# <div class="inline-block radius-full flex align-items-center justify-content-center mb-12 px-6 py-4 border-1 border-yellow-400 text-2xs leading-100 bold tracking-loose color-yellow-200 bg-yellow-400 bg-opacity-40">PRO</div> #}
<h3 class="color-heading text-xl leading-120 mb-12 bold"><span class="color-heading-accent">Figma template</span> to boost <br class="hidden sm.inline">your design workflow</h3>
<p class="color-paragraph text-md mb-16 max-w-448">Access the library directly in your Figma with customizable layers and swappable instances.</p>
<span class="text-md bold color-white color-opacity-40">Coming soon</span>
</div>
</div>
</div>
<div class="glass-container" x-data="{ tab: 0 }">
<div class="glass-container-inner">
<ul class="flex md.grid grid-cols-2 border-b-1 border-white border-opacity-30 overflow-auto space-nowrap">
<li class="flex-1 border-r-1 border-white border-opacity-20">
<button class="flex align-items-center justify-content-center w-100p h-56 px-24 color-white text-sm semibold transition-200" :class="tab == 0 ? '' : 'bg-white bg-opacity-8 hover.bg-opacity-0'" @click="tab = 0">
<svg class="color-pink-400 mr-10" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 9L21 3H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10 3H7.8C6.11984 3 5.27976 3 4.63803 3.32698C4.07354 3.6146 3.6146 4.07354 3.32698 4.63803C3 5.27976 3 6.11984 3 7.8V16.2C3 17.8802 3 18.7202 3.32698 19.362C3.6146 19.9265 4.07354 20.3854 4.63803 20.673C5.27976 21 6.11984 21 7.8 21H16.2C17.8802 21 18.7202 21 19.362 20.673C19.9265 20.3854 20.3854 19.9265 20.673 19.362C21 18.7202 21 17.8802 21 16.2V14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 3L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Line
</button>
</li>
<li class="flex-1 border-r-1 border-white border-opacity-20">
<button class="flex align-items-center justify-content-center w-100p h-56 px-24 color-white text-sm semibold transition-200" :class="tab == 1 ? '' : 'bg-white bg-opacity-8 hover.bg-opacity-0'" @click="tab = 1">
<svg class="color-pink-400 mr-10" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.0352 7.42929C13.6292 6.83526 13.9262 6.53825 14.0375 6.19576C14.1354 5.89449 14.1354 5.56997 14.0375 5.26871C13.9262 4.92621 13.6292 4.6292 13.0352 4.03518L11.7029 2.70294C11.4435 2.44352 11.3138 2.3138 11.1624 2.22104C11.0282 2.1388 10.8819 2.07819 10.7288 2.04145C10.5562 2 10.3728 2 10.0059 2H8.4C6.15979 2 5.03969 2 4.18404 2.43597C3.43139 2.81947 2.81947 3.43139 2.43597 4.18404C2 5.03969 2 6.15979 2 8.4V15.6C2 17.8402 2 18.9603 2.43597 19.816C2.81947 20.5686 3.43139 21.1805 4.18404 21.564C5.03969 22 6.15979 22 8.4 22H15.6C17.8402 22 18.9603 22 19.816 21.564C20.5686 21.1805 21.1805 20.5686 21.564 19.816C22 18.9603 22 17.8402 22 15.6V13.9941C22 13.6272 22 13.4438 21.9586 13.2712C21.9218 13.1181 21.8612 12.9718 21.779 12.8376C21.6862 12.6862 21.5565 12.5565 21.2971 12.2971L19.9648 10.9648C19.3708 10.3708 19.0738 10.0738 18.7313 9.9625C18.43 9.86462 18.1055 9.86462 17.8042 9.9625C17.4617 10.0738 17.1647 10.3708 16.5707 10.9648L13.7678 13.7678C12.7915 14.7441 11.2085 14.7441 10.2322 13.7678C9.25592 12.7915 9.25592 11.2085 10.2322 10.2322L13.0352 7.42929Z" fill="currentColor"/>
<path d="M21 9L21 3H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 3L12 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Solid
</button>
</li>
</ul>
<div class="glass-code flex flex-col sm.flex-row">
<div class="sm.flex-1 h-512">
{% include "partials/home-line-icons.njk" %}
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="gsap-section-1">
<div class="px-0 md.px-32">
<div class="md.max-w-896 lg.max-w-1152 mx-auto relative grid grid-cols-1 md.grid-cols-2 gap-72 sm.gap-96 lg.gap-160 py-112 md.py-0">
<div class="px-32 md.px-0 md.py-112">
<h3 class="color-heading text-3xl leading-110 mb-24 bold text-left sm.text-center md.text-left"><span class="color-heading-accent">Clean and precisely drawn</span> <br class="hidden sm.inline">for timeless neutrality</h3>
<p class="color-paragraph max-w-768 mx-auto text-md text-left sm.text-center md.text-left mb-72">All our icon elements are based on a consistent 48x48 pixel grid and layers are carefully sized and positioned to ensure every icon looks neutral, beautiful, and timeless.</p>
<img src="/assets/img/clean-precise.svg" class="max-w-256 mx-auto">
</div>
<div class="glass-pipe">
<div class="vertical-pipe">
<div class="tail"></div>
<div class="comet"></div>
<div class="glow"></div>
</div>
<div class="vertical-pipe">
<div class="tail"></div>
<div class="comet"></div>
<div class="glow"></div>
</div>
<div class="vertical-pipe">
<div class="tail"></div>
<div class="comet"></div>
<div class="glow"></div>
</div>
</div>
<div class="px-32 md.px-0 md.py-112">
<h3 class="color-heading text-3xl leading-110 mb-24 bold text-left sm.text-center md.text-left"><span class="color-heading-accent">Corner smoothing</span> <br class="hidden sm.inline">attention to every detail</h3>
<p class="color-paragraph max-w-768 mx-auto text-md text-left sm.text-center md.text-left mb-72">We care about the tiniest details. We've enabled corner smoothing for more natural curvature and all our SVG outputs are cleaned up for optimal fidelity and file size.</p>
<img src="/assets/img/corner-smoothing.svg" class="mx-auto mt-n56">
</div>
</div>
</div>
</section>
<section class="mt-128 mb-256 gsap-section-1">
<div class="px-20 sm.px-32">
<div class="relative max-w-896 lg.max-w-1152 mx-auto">
<div class="glass-frame">
<div class="glass-frame-light">
<img src="/assets/img/frame-fill-light.svg" class="w-100p">
</div>
<div class="glass-frame-outer">
<div class="glass-frame-inner"></div>
</div>
</div>
<div class="glass-keylight">
<div class="glass-keylight-outer">
<div class="glass-keylight-inner">
</div>
</div>
</div>
<div class="relative z-1">
<h1 class="font-6xl sm.font-7xl md.font-8xl lg.font-9xl leading-110 extrabold mb-24 tracking-tighter color-heading">
<span class="color-heading-accent">Professional grade</span> library <br class="hidden sm.inline">made for the best dribbble UIs
</h1>
<p class="text-lg sm.text-lg md.text-lg max-w-640 tracking-tight mb-72 color-paragraph">
<span class="mr-4">We've meticulously refined every detail whilst also providing a complete range of styles and customizability so that your UI will look amazing regardless of project.</span> <a href="/docs/overview" class="color-white hover.color-opacity-80 transition-100 bold inline-flex align-items-center">
View icon explorer <ion-icon name="arrow-forward" class="w-18 h-18 ml-4 color-yellow-200"></ion-icon>
</a>
</p>
{# <div class="flex gap-10 mb-72">
<a href="/docs/overview" class="inline-flex align-items-center h-40 px-16 color-black bg-yellow-300 hover.bg-yellow-400 transition-100 radius-md semibold text-md">
Play on Codepen
</a>
</div> #}
<div class="ui-showcase">
<div class="ui-grid">
<div class="col-2 grid grid-cols-1 gap-48">
<div>
{% include "partials/ui/calendar.njk" %}
</div>
<div>
{% include "partials/ui/calendar-detail.njk" %}
</div>
<div>
{% include "partials/ui/sign-in.njk" %}
</div>
</div>
<div class="col-3 grid grid-cols-1 gap-48">
<div>
{% include "partials/ui/ecommerce.njk" %}
</div>
<div class="bg-white radius-xl overflow-hidden">
<div class="p-12 pb-0">
<div class="relative">
<div class="absolute top-0 left-0 flex align-items-center justify-content-center w-40 h-40">
<ion-icon name="search" class="w-20 h-20"></ion-icon>
</div>
<input type="text" class="h-40 pl-40 bg-cool-gray-100 hover.bg-cool-gray-200 hover.bg-opacity-80 radius-md text-sm" placeholder="Search">
</div>
</div>
<div>
<h4 class="px-18 py-16 pb-4 tracking-loose uppercase text-xs tracking-loose bold color-cool-gray-400">
Recent searches
</h4>
<div class="px-18 pb-18 gutter-y-1">
<button class="group flex align-items-center justify-content-between w-100p px-14 py-6 bg-cool-gray-100 hover.bg-cool-gray-100 text-sm color-cool-gray-700 hover.color-cool-gray-900 semibold radius-sm">
Custom event properties
<span class="medium text-xs color-cool-gray-500 group-hover.color-cool-gray-700">custom.event</span>
</button>
<button class="group flex align-items-center justify-content-between w-100p px-14 py-6 hover.bg-cool-gray-100 text-sm color-cool-gray-700 hover.color-cool-gray-900 semibold radius-sm">
Device fingerprint
<span class="medium text-xs color-cool-gray-500 group-hover.color-cool-gray-700">device.id</span>
</button>
<button class="group flex align-items-center justify-content-between w-100p px-14 py-6 hover.bg-cool-gray-100 text-sm color-cool-gray-700 hover.color-cool-gray-900 semibold radius-sm">
Shipping address
<span class="medium text-xs color-cool-gray-500 group-hover.color-cool-gray-700">address.shipping</span>
</button>
<button class="group flex align-items-center justify-content-between w-100p px-14 py-6 hover.bg-cool-gray-100 text-sm color-cool-gray-700 hover.color-cool-gray-900 semibold radius-sm">
Email
<span class="medium text-xs color-cool-gray-500 group-hover.color-cool-gray-700">user.email</span>
</button>
</div>
<div>
<div class="border-t-1x border-indigo-200 ">
<button class="px-12 py-12 w-100p flex align-items-center justify-content-center text-sm semibold bg-indigo-50 hover.bg-indigo-100 color-indigo-800 hover.color-indigo-900">
<ion-icon name="add-circle" class="w-20 h-20 mr-8 color-indigo-500"></ion-icon>
Add Advanced Signal
</button>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-8 gap-48">
<div class="col-5">
<div>
{% include "partials/ui/pop-up.njk" %}
</div>
</div>
<div class="col-3">
<div class="grid grid-cols-1 gap-32">
<div class="flex align-items-center border-1 border-cool-gray-200 hover.border-cool-gray-200 shadow-2xs hover.shadow-xs radius-md overflow-hidden transition-200 w-100p">
<button class="inline-flex align-items-center justify-content-center bg-white hover.bg-cool-gray-100 border-r-1 last.border-r-0 border-cool-gray-200 shadow-2xs hover.shadow-xs color-cool-gray-700 transition-200 text-xs color-white semibold space-nowrap w-100p h-40">
1D
</button>
<button class="inline-flex align-items-center justify-content-center bg-white bg-cool-gray-100 hover.bg-cool-gray-100 border-r-1 last.border-r-0 border-cool-gray-200 shadow-2xs hover.shadow-xs color-cool-gray-700 transition-200 text-xs color-white semibold space-nowrap w-100p h-40">
5D
</button>
<button class="inline-flex align-items-center justify-content-center bg-white hover.bg-cool-gray-100 border-r-1 last.border-r-0 border-cool-gray-200 shadow-2xs hover.shadow-xs color-cool-gray-700 transition-200 text-xs color-white semibold space-nowrap w-100p h-40">
1M
</button>
<button class="inline-flex align-items-center justify-content-center bg-white hover.bg-cool-gray-100 border-r-1 last.border-r-0 border-cool-gray-200 shadow-2xs hover.shadow-xs color-cool-gray-700 transition-200 text-xs color-white semibold space-nowrap w-100p h-40">
6M
</button>
</div>
<div class="flex flex-wrap gap-32">
<div>
<button class="inline-flex align-items-center justify-content-center bg-white hover.bg-cool-gray-50 border-r-1 last.border-r-0 border-cool-gray-200 shadow-2xs hover.shadow-xs color-cool-gray-700 transition-200 text-xs color-white semibold space-nowrap md.w-100p h-40 px-14 radius-md">
<ion-icon name="star" class="w-16 h-16 mr-8 color-yellow-400"></ion-icon>
Starred
<div class="ml-10 px-8 py-4 leading-100 radius-full bg-cool-gray-200">
2.8k
</div>
</button>
</div>
<div class="flex align-items-center gap-24">
<button type="button" class="bg-teal-500 inline-flex h-24 w-40 p-4 radius-full" role="switch" aria-checked="false">
<span class="block h-16 w-16 radius-full bg-white shadow-xs duration-200 ease-in-out"></span>
</button>
<button class="inline-flex align-items-center justify-content-center bg-white hover.bg-cool-gray-50 border-r-1 last.border-r-0 border-cool-gray-200 shadow-2xs hover.shadow-xs color-cool-gray-700 transition-200 text-xs color-white semibold space-nowrap h-28 px-12 radius-md">
Button
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block col-2">
<div class="grid grid-cols-1 gap-48">
<div>
{% include "partials/ui/player.njk" %}
</div>
<div>
{% include "partials/ui/activity.njk" %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-256x gsap-section-2">
<div class="px-20 sm.px-32">
<div class="relative max-w-896 lg.max-w-1152 mx-auto">
<div class="glass-frame">
<div class="glass-frame-light">
<img src="/assets/img/frame-fill-light.svg" class="w-100p">
</div>
<div class="glass-frame-outer">
<div class="glass-frame-inner"></div>
</div>
</div>
<div class="glass-keylight">
<div class="glass-keylight-outer">
<div class="glass-keylight-inner">
</div>
</div>
</div>
<div class="relative z-1">
<h1 class="font-6xl sm.font-7xl md.font-8xl lg.font-9xl leading-110 extrabold mb-24 tracking-tighter color-heading">
<span class="color-heading-accent">Versatile and scalable</span> in<br class="hidden sm.inline"> in all the way it matters
</h1>
<p class="text-lg sm.text-lg md.text-lg max-w-768 tracking-tight mb-72 color-paragraph">
Our neutral icons are designed with calm aesthetics and feature cutting-edge technical details to ensure it withstands the test of time and stay true to our core design philosophy.
</p>
<ul class="grid grid-cols-2 sm.grid-cols-3 md.grid-cols-3 lg.grid-cols-4 col-gap-16 sm.col-gap-48 row-gap-72">
<li>
<img src="/assets/img/feature-icons/feature-icon-01.svg" class="mb-24">
<div>
<h3 class="color-heading text-md leading-130 mb-10 semibold"><span class="color-heading-accent">Professional grade</span> <br>icon library set</h3>
<p class="color-paragraph text-sm leading-160">Designed to support small and large applications and teams.</p>
</div>
</li>
<li>
<img src="/assets/img/feature-icons/feature-icon-02.svg" class="mb-24">
<div>
<h3 class="color-heading text-md leading-130 mb-10 semibold"><span class="color-heading-accent">Open source</span> <br>and free to use</h3>
<p class="color-paragraph text-sm leading-160">Icon are always updated to ensure they stay relevant.</p>
</div>
</li>
<li>
<img src="/assets/img/feature-icons/feature-icon-03.svg" class="mb-24">
<div>
<h3 class="color-heading text-md leading-130 mb-10 semibold"><span class="color-heading-accent">Custom widths</span> <br>and roundness</h3>
<p class="color-paragraph text-sm leading-160">Refine by changing stroke widths and corner roundness.</p>
</div>
</li>
<li>
<img src="/assets/img/feature-icons/feature-icon-04.svg" class="mb-24">
<div>
<h3 class="color-heading text-md leading-130 mb-10 semibold"><span class="color-heading-accent">Optimized</span> for clean <br>SVG outputs</h3>
<p class="color-paragraph text-sm leading-160">SVG outputs are cleaned up for optimal fidelity and file size.</p>
</div>
</li>
<li>
<img src="/assets/img/feature-icons/feature-icon-05.svg" class="mb-24">
<div>
<h3 class="color-heading text-md leading-130 mb-10 semibold"><span class="color-heading-accent">5x custom styles</span> <br>for max. flexibility</h3>
<p class="color-paragraph text-sm leading-160">Choose between line, duo-line duo-tone, duo-fill, and solid.</p>
</div>
</li>
<li>
<img src="/assets/img/feature-icons/feature-icon-06.svg" class="mb-24">
<div>
<h3 class="color-heading text-md leading-130 mb-10 semibold"><span class="color-heading-accent">24x24 Grid</span> for <br>refined consistency</h3>
<p class="color-paragraph text-sm leading-160">Our custom grids help ensure consistency and precision.</p>
</div>
</li>
<li>
<img src="/assets/img/feature-icons/feature-icon-07.svg" class="mb-24">
<div>
<h3 class="color-heading text-md leading-130 mb-10 semibold"><span class="color-heading-accent">Looks amazing</span> on <br>all modern displays</h3>
<p class="color-paragraph text-sm leading-160">Crafted with modern UI, apps, and websites in mind.</p>
</div>
</li>
<li>
<img src="/assets/img/feature-icons/feature-icon-08.svg" class="mb-24">
<div>
<h3 class="color-heading text-md leading-130 mb-10 semibold"><span class="color-heading-accent">Figma template</span> to <br>boost your workflow</h3>
<p class="color-paragraph text-sm leading-160">Get access to the entire icon library directly in your Figma.</p>
</div>
</li>
</ul>
<div class="relative max-w-640 mx-auto py-112">
<div class="flex align-items-center justify-content-center mb-32">
<a href="https://rewatch.com/" target="_blank">
<svg class="w-128" viewBox="0 0 100 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.297 0.459484C15.9698 0.651134 16.1593 1.47609 15.6915 1.99757C15.5909 2.11036 15.4689 2.19606 15.3351 2.25392C15.1075 2.35231 14.8458 2.37037 14.5978 2.30397C11.2501 1.41017 7.53037 2.27662 4.90342 4.90333C2.20811 7.5984 1.36631 11.4453 2.37803 14.8601C2.49424 15.2515 2.39854 15.6809 2.10166 15.9617C1.59287 16.4429 0.762796 16.2769 0.552835 15.6089C-0.745017 11.4797 0.242288 6.78736 3.51475 3.51466C6.70518 0.324474 11.2452 -0.694081 15.297 0.459484ZM9.13975 21.6223C8.96397 21.5703 8.78037 21.5608 8.60655 21.593C8.55869 21.6018 8.51182 21.6138 8.46592 21.6287C8.41905 21.6441 8.37315 21.6626 8.32823 21.6846L8.28721 21.7066L8.23252 21.7388L8.19444 21.7637C8.13877 21.8027 8.08604 21.8477 8.03819 21.8984C7.55772 22.407 7.72373 23.2371 8.39073 23.447C12.5206 24.7451 17.213 23.7578 20.4855 20.4854C23.6759 17.2949 24.6944 12.7551 23.5401 8.70314C23.4415 8.35499 23.173 8.13649 22.8644 8.0713C22.5763 8.01026 22.254 8.08277 22.0021 8.30812C21.6983 8.58082 21.5909 9.00734 21.6964 9.40211C22.5899 12.75 21.7237 16.4702 19.0968 19.0967C16.4015 21.792 12.5548 22.6338 9.13975 21.6223ZM18.8497 5.06617C19.5733 5.06617 20.1593 4.47999 20.1593 3.75709C20.1593 3.37867 19.9991 3.03785 19.7423 2.79884C19.5079 2.58107 19.1944 2.44801 18.8497 2.44801C18.1271 2.44801 17.5411 3.03395 17.5411 3.75709C17.5411 4.47999 18.1271 5.06617 18.8497 5.06617ZM6.45908 20.1106C6.45908 20.8335 5.87315 21.4197 5.15049 21.4197C4.42686 21.4197 3.84092 20.8335 3.84092 20.1106C3.84092 19.3875 4.42686 18.8015 5.15049 18.8015C5.87315 18.8015 6.45908 19.3875 6.45908 20.1106ZM16.1866 11.5161C16.6446 11.7393 16.6446 12.3911 16.1866 12.6143L9.421 15.9131C9.01475 16.1111 8.54209 15.8154 8.54209 15.364V8.76637C8.54209 8.31495 9.01475 8.0193 9.421 8.2173L16.1866 11.5161ZM95.7032 10.8662C94.6349 10.8662 93.8927 11.5852 93.8868 12.8125V18.3164H91.2716V5.62233H93.8126V10.4756H93.923C94.3526 9.35377 95.3097 8.67189 96.7413 8.67189C98.7052 8.67189 100.006 10.0232 100 12.2544V18.3164H97.3849V12.7256C97.3907 11.5542 96.7647 10.8662 95.7032 10.8662ZM85.7325 18.5025C88.2433 18.5025 89.8204 17.0149 89.9435 14.8267H87.4757C87.3224 15.8433 86.6593 16.4136 85.7628 16.4136C84.5411 16.4136 83.7501 15.3784 83.7501 13.5562C83.7501 11.7588 84.548 10.7297 85.7628 10.7297C86.7208 10.7297 87.3341 11.3682 87.4757 12.3164H89.9435C89.8321 10.116 88.1817 8.67189 85.7198 8.67189C82.8595 8.67189 81.0919 10.6738 81.0919 13.5933C81.0919 16.488 82.8292 18.5025 85.7325 18.5025ZM78.4415 8.79591H80.2159V10.7793H78.4415V15.3909C78.4415 16.1223 78.8038 16.3208 79.3263 16.3208C79.5421 16.3208 79.7823 16.2727 79.9239 16.2442L79.9767 16.2339L80.3878 18.1987C80.1241 18.2857 79.6446 18.4219 78.9698 18.4468C77.0733 18.5274 75.8146 17.6038 75.8272 15.738V10.7793H74.5382V8.79591H75.8272V6.5149H78.4415V8.79591ZM68.2091 18.4963C69.6017 18.4963 70.504 17.8826 70.9649 16.9963H71.0382V18.3164H73.5177V11.895C73.5177 9.62648 71.6153 8.67189 69.5157 8.67189C67.2569 8.67189 65.7716 9.76271 65.4093 11.4983L67.8282 11.6968C68.006 11.0645 68.5646 10.5996 69.504 10.5996C70.3937 10.5996 70.9034 11.052 70.9034 11.833V11.8701C70.9034 12.4839 70.2589 12.5645 68.6202 12.7256C66.754 12.8992 65.0782 13.5315 65.0782 15.6575C65.0782 17.5418 66.4103 18.4963 68.2091 18.4963ZM68.9571 16.6738C68.1534 16.6738 67.5763 16.2957 67.5763 15.5706C67.5763 14.8267 68.1837 14.4612 69.1046 14.3311C69.6759 14.2505 70.6085 14.114 70.922 13.9033V14.9136C70.922 15.9114 70.1056 16.6738 68.9571 16.6738ZM55.7862 18.3167H53.0235L50.4581 8.79591H53.1036L54.5646 15.1926H54.6505L56.173 8.79591H58.7687L60.3155 15.1555H60.3956L61.8321 8.79591H64.4718L61.9122 18.3167H59.1437L57.5235 12.3291H57.4064L55.7862 18.3167ZM45.5431 18.5025C47.8761 18.5025 49.4474 17.3557 49.8155 15.5891L47.3976 15.428C47.1329 16.1533 46.4581 16.5315 45.586 16.5315C44.2794 16.5315 43.4503 15.6575 43.4503 14.238L49.8712 14.2317V13.5066C49.8712 10.271 47.9308 8.67189 45.4396 8.67189C42.6651 8.67189 40.8663 10.6614 40.8663 13.5996C40.8663 16.6182 42.6397 18.5025 45.5431 18.5025ZM43.4503 12.5955C43.506 11.5108 44.3224 10.6428 45.4825 10.6428C46.6173 10.6428 47.4034 11.4612 47.4093 12.5955H43.4503ZM33.1085 18.3164H30.4503V5.62233H35.4103C38.2638 5.62233 39.9151 7.24635 39.9151 9.76905C39.9151 11.5044 39.1231 12.7627 37.6935 13.3826L40.3634 18.3164H37.4288L35.048 13.8164H33.1085V18.3164ZM33.1085 7.81642V11.6594H34.9122C36.4347 11.6594 37.1778 11.0274 37.1778 9.76905C37.1778 8.50441 36.4347 7.81642 34.9005 7.81642H33.1085Z" fill="#fff"/>
</svg>
</a>
</div>
<h3 class="font-3xl sm.font-5xl md.font-5xl lg.font-5xl leading-120 extrabold mb-36 tracking-tighter text-center color-heading">
“It's been a fantastic tool to help with automating the generation of a custom set of utility classes that we need.”
</h3>
<div class="flex align-items-center justify-content-center">
<img src="/assets/img/profiles/conormuirhead.jpeg" class="w-48 h-48 radius-full border-2 border-white mr-14">
<div>
<div class="color-white font-md semibold mb-10">Conor Muirhead</div>
<div class="color-white color-opacity-70 font-xs semibold">Head Of Design</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-72">
<div class="px-20 sm.px-32">
<div class="max-w-896 lg.max-w-1152 mx-auto">
<div class="glowing-divider mb-112"></div>
<h1 class="text-6xl bold text-center color-heading-accent mb-48">
Frequently asked questions
</h1>
<div class="flex justify-content-center mb-96">
<ul class="w-auto sm.w-640 max-w-640 mx-auto grid grid-cols-1 gap-24">
<li class="flex align-items-start bold text-md color-white border-b-1 border-white border-opacity-20 pb-28" x-data="{ open: false }">
<div class="w-28 h-28 flex flex-none mr-12 items-center justify-center">
<ion-icon name="add" class="w-28 h-28 color-yellow-300" x-show="!open"></ion-icon>
<ion-icon name="remove" class="w-28 h-28 color-yellow-300" x-show="open"></ion-icon>
</div>
<div>
<div @click="open = !open" class="cursor-pointer">
Do you provide multi-user licenses for teams?
</div>
<div class="mt-10 pb-4" x-cloak x-show="open" x-transition.opacity>
<p class="regular color-paragraph">
Please contact our team and tell us how many users you require a license for via <a href="mailto:team@senderplate.com" class="semibold color-yellow-300">team@senderplate.com</a>, and our staff will provide assistance in acquiring a multi-user licenses for your team or business.
</p>
</div>
</div>
</li>
<li class="flex align-items-start bold text-md color-white border-b-1 border-white border-opacity-20 pb-28" x-data="{ open: false }">
<div class="w-28 h-28 flex flex-none mr-12 items-center justify-center">
<ion-icon name="add" class="w-28 h-28 color-yellow-300" x-show="!open"></ion-icon>
<ion-icon name="remove" class="w-28 h-28 color-yellow-300" x-show="open"></ion-icon>
</div>
<div>
<div @click="open = !open" class="cursor-pointer">
Why do I need an icon library?
</div>
<div class="mt-10 pb-4" x-cloak x-show="open" x-transition.opacity>
<p class="regular color-paragraph">
Nothing stands out more in modern UI design than inconsistent icons. There are hundreds of icon libraries floating around the internet today, but the majority of them are low quality, buggy, overly stylized, or simply too small — usually all of these.</p>
</div>
</div>
</li>
<li class="flex align-items-start bold text-md color-white border-b-1 border-white border-opacity-20 pb-28" x-data="{ open: false }">
<div class="w-28 h-28 flex flex-none mr-12 items-center justify-center">
<ion-icon name="add" class="w-28 h-28 color-yellow-300" x-show="!open"></ion-icon>
<ion-icon name="remove" class="w-28 h-28 color-yellow-300" x-show="open"></ion-icon>
</div>
<div>
<div @click="open = !open" class="cursor-pointer">
How are Untitled UI Icons different?
</div>
<div class="mt-10 pb-4" x-cloak x-show="open" x-transition.opacity>
<p class="regular color-paragraph">
Nothing stands out more in modern UI design than inconsistent icons. There are hundreds of icon libraries floating around the internet today, but the majority of them are low quality, buggy, overly stylized, or simply too small — usually all of these.</p>
</div>
</div>
</li>
<li class="flex align-items-start bold text-md color-white border-b-1 border-white border-opacity-20 pb-28" x-data="{ open: false }">
<div class="w-28 h-28 flex flex-none mr-12 items-center justify-center">
<ion-icon name="add" class="w-28 h-28 color-yellow-300" x-show="!open"></ion-icon>
<ion-icon name="remove" class="w-28 h-28 color-yellow-300" x-show="open"></ion-icon>
</div>
<div>
<div @click="open = !open" class="cursor-pointer">
Is there a free version available?
</div>
<div class="mt-10 pb-4" x-cloak x-show="open" x-transition.opacity>
<p class="regular color-paragraph">
Nothing stands out more in modern UI design than inconsistent icons. There are hundreds of icon libraries floating around the internet today, but the majority of them are low quality, buggy, overly stylized, or simply too small — usually all of these.</p>
</div>
</div>
</li>
<li class="flex align-items-start bold text-md color-white border-b-1 border-white border-opacity-20 pb-28" x-data="{ open: false }">
<div class="w-28 h-28 flex flex-none mr-12 items-center justify-center">
<ion-icon name="add" class="w-28 h-28 color-yellow-300" x-show="!open"></ion-icon>
<ion-icon name="remove" class="w-28 h-28 color-yellow-300" x-show="open"></ion-icon>
</div>
<div>
<div @click="open = !open" class="cursor-pointer">
Can I use it for commercial projects?
</div>
<div class="mt-10 pb-4" x-cloak x-show="open" x-transition.opacity>
<p class="regular color-paragraph">
Nothing stands out more in modern UI design than inconsistent icons. There are hundreds of icon libraries floating around the internet today, but the majority of them are low quality, buggy, overly stylized, or simply too small — usually all of these.</p>
</div>
</div>
</li>
<li class="flex align-items-start bold text-md color-white border-b-1 border-white border-opacity-20 pb-28" x-data="{ open: false }">
<div class="w-28 h-28 flex flex-none mr-12 items-center justify-center">
<ion-icon name="add" class="w-28 h-28 color-yellow-300" x-show="!open"></ion-icon>
<ion-icon name="remove" class="w-28 h-28 color-yellow-300" x-show="open"></ion-icon>
</div>
<div>
<div @click="open = !open" class="cursor-pointer">
Do I need to pay for Figma if I'm a student?
</div>
<div class="mt-10 pb-4" x-cloak x-show="open" x-transition.opacity>
<p class="regular color-paragraph">
Nothing stands out more in modern UI design than inconsistent icons. There are hundreds of icon libraries floating around the internet today, but the majority of them are low quality, buggy, overly stylized, or simply too small — usually all of these.</p>
</div>
</div>
</li>
<li class="flex align-items-start bold text-md color-white border-b-1 border-white border-opacity-20 pb-28" x-data="{ open: false }">
<div class="w-28 h-28 flex flex-none mr-12 items-center justify-center">
<ion-icon name="add" class="w-28 h-28 color-yellow-300" x-show="!open"></ion-icon>
<ion-icon name="remove" class="w-28 h-28 color-yellow-300" x-show="open"></ion-icon>
</div>
<div>
<div @click="open = !open" class="cursor-pointer">
How do I access updates after purchasing?
</div>
<div class="mt-10 pb-4" x-cloak x-show="open" x-transition.opacity>
<p class="regular color-paragraph">
Nothing stands out more in modern UI design than inconsistent icons. There are hundreds of icon libraries floating around the internet today, but the majority of them are low quality, buggy, overly stylized, or simply too small — usually all of these.</p>
</div>
</div>
</li>
</ul>
</div>
<div class="bg-white bg-opacity-10 radius-2xl p-12" x-data="{ tab: 0 }">
<div class="relative radius-xl bg-black bg-opacity-70 flex align-items-center px-36 sm.pl-48 lg.pl-64 sm.pr-0 py-48 sm.py-0 sm.h-320 overflow-hidden">
<div class="absolute top-0 left-0 pointer-events-none">
<img src="/assets/img/community-guidelines.svg">
</div>
<img src="/assets/img/community-discord.svg" class="block sm.hidden absolute top-0 right-0 w-288 mt-n96 mr-n96 pointer-events-none">
<div class="relative z-2 grid grid-cols-12 align-items-center">
<div class="col-12 sm.col-6">
<div class="inline-block radius-full flex align-items-center justify-content-center mb-12 px-6 py-4 border-1 border-teal-400 text-2xs leading-100 bold tracking-loose color-teal-200 bg-teal-400 bg-opacity-40">NEW</div>
<h3 class="color-heading text-3xl leading-110 mb-12 bold"><span class="color-heading-accent">Join our community</span> <br>on Discord</h3>
<p class="max-w-384 mb-24 text-md color-paragraph">
Stay up-to-date with updates, articles, free design assets, and other cool stuff. No spam, we promise.
</p>
<a href="/docs/overview" class="color-white hover.color-opacity-80 transition-100 bold inline-flex align-items-center">
Join our channel <ion-icon name="arrow-forward" class="w-18 h-18 ml-4 color-yellow-300"></ion-icon>
</a>
</div>
<div class="hidden sm.block col-12 sm.col-6 pb-32">
<img src="/assets/img/community-discord.svg">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{% include "partials/footer.njk" %}
</div>