shuqi
/
pixel-icon-web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: shuqi:91491d2e8ddd509e54e6bcc7b4bdd67a21649cb0
Branches Tags
shuqi:main
..
compare: shuqi:3aa35107f1ee4f8f18656e77d2296c1fc12f3b5a
Branches Tags
shuqi:main

10 Commits
91491d2e8d ... 3aa35107f1

Author SHA1 Message Date
Shuqi 3aa35107f1 Changed cover 2023-11-16 02:38:49 +08:00
Shuqi 310f5ad7bf Added new icons and some tags 2023-11-16 02:38:37 +08:00
Shuqi 9368eb444b Tidied up SVG codes 2023-11-16 02:37:49 +08:00
Shuqi 752cb63274 Renamed smartphone icon, added computer and tablet 2023-11-16 02:37:27 +08:00
Shuqi 1dc25b7da4 Added missing dog icon 2023-11-14 15:39:21 +08:00
Shuqi 8cf1b24de3 Added more tag for export icon 2023-11-14 15:31:39 +08:00
Shuqi 6d3cb7454b Added new icons 2023-11-14 15:30:12 +08:00
Shuqi 0c28bd5390 Removed highlight around input 2023-11-14 02:58:34 +08:00
Shuqi fa174cc3a8 Removed console log 2023-11-14 02:58:06 +08:00
Shuqi ce92b6a9f9 New icons 2023-11-14 02:57:54 +08:00
27 changed files with 215 additions and 36 deletions
Show Stats Expand all files Collapse all files

2
index.html
View File

@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="Pixel Icons" />
<meta property="og:url" content="https://sqkhor.com/pixel-icons/" />
<meta property="og:image" content="https://sqkhor.com/pixel-icons/cover.png" />
<meta property="og:image" content="https://sqkhor.com/pixel-icons/cover2.png" />
<meta property="og:description" content="This is a set of over 100 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />
<title>Pixel Icons</title>
<meta name="description" content="This is a set of over 100 SVG icons made with a 9x9 pixel grid. Feel free to use them as you please." />

BIN
public/cover2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

4
public/icons/apple-logo.svg
View File

@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-apple-logo">
<rect x="5" y="0" fill="#343340" width="1" height="1"/>
<rect x="4" y="1" fill="#343340" width="1" height="1"/>
<rect fill="#343340" x="5" y="0" width="1" height="1"/>
<rect fill="#343340" x="4" y="1" width="1" height="1"/>
<polygon fill="#343340" points="7,5 8,5 8,4 7,4 7,3 5,3 5,4 4,4 4,3 2,3 2,4 1,4 1,8 2,8 2,9 4,9 4,8 5,8 5,9 7,9 7,8 8,8 8,7 7,7"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 340 B

After

Width:  |  Height:  |  Size: 340 B

15
public/icons/cat-sit.svg Normal file
View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-sit">
<polygon fill="#EBEAF7" points="4,3 4,2 3,2 3,3 2,3 2,4 5,4 5,3"/>
<polygon fill="#EBEAF7" points="4,6 4,5 2,5 2,8 3,8 3,7 4,7 4,8 5,8 5,6"/>
<polygon fill="#FFB100" points="5,0 5,1 3,1 3,2 5,2 5,4 6,4 6,0"/>
<rect fill="#FFB100" x="1" y="3" width="1" height="1"/>
<polygon fill="#FFB100" points="4,5 4,6 5,6 5,7 6,7 6,5"/>
<polygon fill="#D38100" points="3,1 2,1 2,0 1,0 1,3 2,3 2,2 3,2"/>
<polygon fill="#D38100" points="6,6 6,7 5,7 5,8 7,8 7,6"/>
<rect fill="#D38100" x="7" y="4" width="1" height="2"/>
<rect fill="#4435FF" x="2" y="4" width="1" height="1"/>
<rect fill="#4435FF" x="4" y="4" width="2" height="1"/>
<rect fill="#FFE800" x="3" y="4" width="1" height="1"/>
<rect fill="#343341" x="2" y="2" width="1" height="1"/>
<rect fill="#343341" x="4" y="2" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 886 B

5
public/icons/device-computer.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-device-computer">
<polygon fill="#A1A0B4" points="5,7 5,6 4,6 4,7 3,7 3,8 6,8 6,7"/>
<path fill="#343341" d="M1,1v5h7V1H1z M7,5H2V2h5V5z"/>
<rect fill="#FFFFFF" x="2" y="2" width="5" height="3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 280 B

5
public/icons/device-smartphone.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-device-smartphone">
<polygon fill="#FFFFFF" points="3,2 3,7 4,7 4,6 5,6 5,7 6,7 6,2"/>
<path fill="#343341" d="M2,1v7h5V1H2z M6,7H3V2h3V7z"/>
<rect fill="#A1A0B4" x="4" y="6" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 282 B

5
public/icons/device-tablet.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-device-tablet">
<polygon fill="#FFFFFF" points="2,1 2,8 4,8 4,7 5,7 5,8 7,8 7,1"/>
<path fill="#343341" d="M1,0v9h7V0H1z M7,8H2V1h5V8z"/>
<rect fill="#A1A0B4" x="4" y="7" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 278 B

7
public/icons/dog.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-dog">
<path fill="#D38100" d="M7,5V4H6v2H5V3H1v1h1v1H1V4H0v2h2v2h1V7h1v1h1V7h2v1h1V5H7z M3,4h1v1H3V4z"/>
<rect fill="#D38100" x="8" y="3" width="1" height="2"/>
<rect fill="#9C5F00" x="5" y="3" width="1" height="3"/>
<rect fill="#343341" x="1" y="4" width="1" height="1"/>
<rect fill="#343341" x="3" y="4" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 415 B

12
public/icons/edit.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-edit">
<rect fill="#D0EAFF" x="3" y="6" width="1" height="1"/>
<rect fill="#D0EAFF" x="2" y="6" width="1" height="1"/>
<rect fill="#D0EAFF" x="2" y="5" width="1" height="1"/>
<polygon fill="#D0EAFF" points="1,1 6,1 6,2 5,2 5,3 4,3 4,4 3,4 3,5 2,5 2,7 4,7 4,8 1,8"/>
<rect fill="#D0EAFF" x="5" y="5" width="1" height="1"/>
<polygon fill="#89CDFF" points="4,6 4,8 5,8 5,7 6,7 6,6"/>
<polygon fill="#C98600" points="7,2 7,1 6,1 6,2 5,2 5,3 4,3 4,4 3,4 3,6 5,6 5,5 6,5 6,4 7,4 7,3 8,3 8,2"/>
<rect fill="#FFB100" x="2" y="5" width="1" height="1"/>
<rect fill="#FFB100" x="3" y="6" width="1" height="1"/>
<rect fill="#343341" x="2" y="6" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 747 B

5
public/icons/export.svg Normal file
View File

@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-export">
<polygon fill="#FFB100" points="6,5 6,7 3,7 3,4 2,4 2,8 7,8 7,5"/>
<rect fill="#4435FF" x="4" y="3" width="1" height="3"/>
<polygon fill="#4435FF" points="8,2 8,1 7,1 7,0 6,0 6,2 5,2 5,3 6,3 6,5 7,5 7,4 8,4 8,3 9,3 9,2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 315 B

15
public/icons/ice-cream.svg Normal file
View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-ice-cream">
<rect fill="#D38100" x="3" y="4" width="1" height="1"/>
<rect fill="#D38100" x="5" y="4" width="1" height="1"/>
<rect fill="#D38100" x="4" y="5" width="1" height="1"/>
<rect fill="#D38100" x="3" y="6" width="1" height="1"/>
<rect fill="#D38100" x="5" y="6" width="1" height="1"/>
<rect fill="#D38100" x="4" y="7" width="1" height="1"/>
<rect fill="#B67100" x="2" y="4" width="1" height="1"/>
<rect fill="#B67100" x="4" y="4" width="1" height="1"/>
<rect fill="#B67100" x="3" y="5" width="1" height="1"/>
<rect fill="#B67100" x="6" y="4" width="1" height="1"/>
<rect fill="#B67100" x="5" y="5" width="1" height="1"/>
<rect fill="#B67100" x="4" y="6" width="1" height="1"/>
<polygon fill="#FFAEB0" points="7,2 6,2 6,1 3,1 3,2 2,2 2,4 3,4 3,5 4,5 4,4 7,4"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 861 B

4
public/icons/inbox.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-inbox">
<polygon fill="#4435FF" points="5,2 5,0 4,0 4,2 2,2 2,3 3,3 3,4 4,4 4,5 5,5 5,4 6,4 6,3 7,3 7,2"/>
<polygon fill="#FFB100" points="6,5 6,6 3,6 3,5 1,5 1,8 8,8 8,5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 257 B

13
public/icons/mail-open.svg Normal file
View File

@ -0,0 +1,13 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-mail-open">
<polygon fill="#D38100" points="7,5 7,6 6,6 6,7 3,7 3,6 2,6 2,5 1,5 1,8 8,8 8,5"/>
<polygon fill="#FFB100" points="6,2 6,1 3,1 3,2 2,2 2,3 7,3 7,2"/>
<rect fill="#FFB100" x="1" y="3" width="1" height="1"/>
<rect fill="#FFB100" x="7" y="3" width="1" height="1"/>
<rect fill="#9C5F00" x="1" y="4" width="1" height="1"/>
<rect fill="#9C5F00" x="2" y="5" width="1" height="1"/>
<rect fill="#9C5F00" x="3" y="6" width="3" height="1"/>
<rect fill="#9C5F00" x="6" y="5" width="1" height="1"/>
<rect fill="#9C5F00" x="7" y="4" width="1" height="1"/>
<rect fill="#D0EAFF" x="3" y="4" width="3" height="2"/>
<polygon fill="#89CDFF" points="2,3 2,5 3,5 3,4 6,4 6,5 7,5 7,3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 769 B

9
public/icons/mail.svg Normal file
View File

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-mail">
<polygon fill="#D38100" points="7,4 7,5 6,5 6,6 3,6 3,5 2,5 2,4 1,4 1,7 8,7 8,4"/>
<polygon fill="#FFB100" points="1,2 1,3 2,3 2,4 3,4 3,5 6,5 6,4 7,4 7,3 8,3 8,2"/>
<rect fill="#9C5F00" x="1" y="3" width="1" height="1"/>
<rect fill="#9C5F00" x="2" y="4" width="1" height="1"/>
<rect fill="#9C5F00" x="3" y="5" width="3" height="1"/>
<rect fill="#9C5F00" x="6" y="4" width="1" height="1"/>
<rect fill="#9C5F00" x="7" y="3" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 541 B

8
public/icons/mailbox.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-mailbox">
<rect fill="#6F6D81" x="5" y="7" width="1" height="2"/>
<polygon fill="#C10015" points="4,3 4,2 2,2 2,3 1,3 1,7 2,7 2,4 5,4 5,3"/>
<polygon fill="#F92F3C" points="8,3 8,4 7,4 7,6 6,6 6,3 8,3 8,2 4,2 4,3 5,3 5,7 9,7 9,3"/>
<polygon fill="#D38100" points="3,6 3,5 2,5 2,7 5,7 5,6"/>
<polygon fill="#FFB100" points="2,4 2,5 3,5 3,6 5,6 5,4"/>
<polygon fill="#EBEAF7" points="6,3 6,6 7,6 7,4 8,4 8,3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

6
public/icons/message-typing.svg Normal file
View File

@ -0,0 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-message-typing">
<path fill="#D0EAFF" d="M8,1H1v5h1v2h1V7h1V6h4V1z M2,3h1v1H2V3z M5,4H4V3h1V4z M7,4H6V3h1V4z"/>
<rect fill="#FFFFFF" x="2" y="3" width="1" height="1"/>
<rect fill="#FFFFFF" x="4" y="3" width="1" height="1"/>
<rect fill="#FFFFFF" x="6" y="3" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 365 B

3
public/icons/message.svg Normal file
View File

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-message">
<path fill="#D0EAFF" d="M8,1H1v5h1v2h1V7h1V6h4V1z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 145 B

4
public/icons/messages.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-messages">
<polygon fill="#D0EAFF" points="6,1 0,1 0,4 1,4 1,5 2,5 2,4 6,4"/>
<polygon fill="#73E030" points="9,4 3,4 3,7 7,7 7,8 8,8 8,7 9,7"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 228 B

4
public/icons/outbox.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-outbox">
<polygon fill="#FFB100" points="6,5 6,6 3,6 3,5 1,5 1,8 8,8 8,5"/>
<polygon fill="#4435FF" points="6,1 5,1 5,0 4,0 4,1 3,1 3,2 2,2 2,3 4,3 4,5 5,5 5,3 7,3 7,2 6,2"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 258 B

23
public/icons/paste.svg
View File

@ -1,16 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 26.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 9 9" style="enable-background:new 0 0 9 9;" xml:space="preserve">
<style type="text/css">
.st0{fill:#D38100;}
.st1{fill:#FFE800;}
.st2{fill:#D0EAFF;}
.st3{fill:#89CDFF;}
</style>
<polygon class="st0" points="6,2 6,3 3,3 3,2 2,2 2,8 5,8 5,5 7,5 7,2 "/>
<polygon class="st1" points="5,1 5,2 4,2 4,1 3,1 3,3 6,3 6,1 "/>
<rect x="4" class="st1" width="1" height="1"/>
<polygon class="st2" points="7,8 8,8 8,5 5,5 5,9 7,9 "/>
<rect x="7" y="8" class="st3" width="1" height="1"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-paste">
<polygon fill="#D38100" points="6,2 6,3 3,3 3,2 2,2 2,8 5,8 5,5 7,5 7,2 "/>
<polygon fill="#FFE800" points="5,1 5,2 4,2 4,1 3,1 3,3 6,3 6,1 "/>
<rect fill="#FFE800" x="4" y="0" width="1" height="1"/>
<polygon fill="#D0EAFF" points="7,8 8,8 8,5 5,5 5,9 7,9 "/>
<rect fill="#89CDFF" x="7" y="8" width="1" height="1"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 760 B

After

Width:  |  Height:  |  Size: 410 B

8
public/icons/plane.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-plane">
<rect fill="#89CDFF" x="7" y="4" width="2" height="1"/>
<polygon fill="#F92F3C" points="1,2 1,1 0,1 0,3 2,3 2,2"/>
<polyline fill="#89CDFF" points="5,4 6,4 6,5 5,5"/>
<rect fill="#89CDFF" x="3" y="4" width="1" height="1"/>
<polygon fill="#EBEAF7" points="7,5 7,4 8,4 8,3 0,3 0,4 1,4 1,5 2,5 2,6 3,6 3,5 3,4 4,4 4,5 5,5 5,4 6,4 6,5 6,6 9,6 9,5"/>
<polygon fill="#F92F3C" points="3,5 3,6 2,6 2,7 5,7 5,6 6,6 6,5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 508 B

12
public/icons/rabbit-grey.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-rabbit-grey">
<path fill="#A1A0B4" d="M7,3V2h1V0H7v1H6v1H5v1H3V2H2v1H1v3h2v1H2v1h3V7h1V6h1v1H6v1h2V5H6V3H7z M3,5H2V4h1V5z M5,5H4V4h1V5z"/>
<rect fill="#A1A0B4" x="3" y="1" width="1" height="1"/>
<rect fill="#A1A0B4" x="4" y="0" width="1" height="1"/>
<rect fill="#A1A0B4" x="8" y="4" width="1" height="1"/>
<rect fill="#6F6D81" x="6" y="6" width="1" height="1"/>
<rect fill="#6F6D81" x="5" y="7" width="1" height="1"/>
<rect fill="#343341" x="2" y="4" width="1" height="1"/>
<rect fill="#343341" x="4" y="4" width="1" height="1"/>
<rect fill="#FFAEB0" x="3" y="2" width="1" height="1"/>
<rect fill="#FFAEB0" x="4" y="1" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 734 B

8
public/icons/rabbit-white.svg Normal file
View File

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-rabbit-white">
<path fill="#EBEAF7" d="M6,5V3h1V2h1V0H7v1H6v1H5v1H4V2h1V0H4v1H3v1H2v1H1v3h2v1H2v1h3V7h1V6h1v1H6v1h2V5H6z M5,4v1H4V4H5z M2,5V4h1 v1H2z"/>
<rect fill="#EBEAF7" x="8" y="4" width="1" height="1"/>
<rect fill="#A1A0B4" x="6" y="6" width="1" height="1"/>
<rect fill="#A1A0B4" x="5" y="7" width="1" height="1"/>
<rect fill="#F92F3C" x="2" y="4" width="1" height="1"/>
<rect fill="#F92F3C" x="4" y="4" width="1" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 520 B

17
public/icons/rainbow.svg Normal file
View File

@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 9" class="pixelicon-rainbow">
<rect fill="#F92F3C" x="1" y="5" width="1" height="3"/>
<rect fill="#F92F3C" x="2" y="3" width="1" height="2"/>
<rect fill="#F92F3C" x="3" y="2" width="2" height="1"/>
<rect fill="#F92F3C" x="5" y="1" width="3" height="1"/>
<rect fill="#FFB100" x="2" y="5" width="1" height="3"/>
<polygon fill="#FFB100" points="3,3 3,5 4,5 4,4 5,4 5,3"/>
<rect fill="#FFB100" x="5" y="2" width="3" height="1"/>
<rect fill="#FFE800" x="3" y="5" width="1" height="3"/>
<rect fill="#FFE800" x="4" y="4" width="1" height="1"/>
<rect fill="#FFE800" x="5" y="3" width="3" height="1"/>
<rect fill="#73E030" x="4" y="5" width="1" height="3"/>
<rect fill="#73E030" x="5" y="4" width="3" height="1"/>
<rect fill="#00AF3E" x="5" y="5" width="1" height="1"/>
<rect fill="#4435FF" x="5" y="6" width="1" height="2"/>
<rect fill="#4435FF" x="6" y="5" width="2" height="1"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 949 B

2
src/IconList.jsx
View File

@ -30,7 +30,7 @@ export const IconList = function () {
if (matched.length == keywords.length) filtered.push(filename)
}
console.log(filtered)
// console.log(filtered)
setIcons(filtered)
}, [query])

51
src/icons.json
View File

@ -24,24 +24,25 @@
"bookmark.svg": [ "bookmark", "ui-icon", "red" ],
"burger-menu.svg": [ "burger-menu", "ui-icon", "food", "orange" ],
"burger.svg": [ "burger", "food", "orange" ],
"bus.svg": [ "bus", "vehicle", "red" ],
"bus.svg": [ "bus", "vehicle", "transportation", "red" ],
"calendar.svg": [ "calendar", "ui-icon", "white", "red" ],
"camera-polaroid.svg": [ "camera-polaroid", "grey-gray" ],
"camera.svg": [ "camera", "grey-gray" ],
"candycane.svg": [ "candycane", "xmas", "christmas", "festive", "red", "white" ],
"car.svg": [ "car", "vehicle", "blue" ],
"car.svg": [ "car", "vehicle", "transportation", "blue" ],
"caret-down.svg": [ "caret-down", "ui-icon", "blue" ],
"caret-left.svg": [ "caret-left", "ui-icon", "blue" ],
"caret-right.svg": [ "caret-right", "ui-icon", "blue" ],
"caret-up.svg": [ "caret-up", "ui-icon", "blue" ],
"cart.svg": [ "cart", "ui-icon", "yellow" ],
"cat.svg": [ "cat", "full-body", "animal", "orange", "white" ],
"cat-black.svg": [ "cat-black", "animal", "black" ],
"cat-calico.svg": [ "cat-calico", "animal", "orange", "white" ],
"cat-grey.svg": [ "cat-grey", "animal", "grey-gray" ],
"cat-orange.svg": [ "cat-orange", "animal", "orange", "white" ],
"cat-tabby.svg": [ "cat-tabby", "animal", "orange" ],
"cat-white.svg": [ "cat-white", "animal", "white" ],
"cat-sit.svg": [ "cat-sit", "full-body", "animal", "orange", "white" ],
"cat-black.svg": [ "cat-black", "face", "animal", "black" ],
"cat-calico.svg": [ "cat-calico", "face", "animal", "orange", "white" ],
"cat-grey.svg": [ "cat-grey", "face", "animal", "grey-gray" ],
"cat-orange.svg": [ "cat-orange", "face", "animal", "orange", "white" ],
"cat-tabby.svg": [ "cat-tabby", "face", "animal", "orange" ],
"cat-white.svg": [ "cat-white", "face", "animal", "white" ],
"chart.svg": [ "chart", "ui-icon" ],
"christmas-tree.svg": [ "christmas-tree", "christmas-tree", "green", "christmas", "xmas", "festive" ],
"chrome.svg": [ "chrome", "logo" ],
@ -49,15 +50,21 @@
"cloud.svg": [ "cloud", "ui-icon", "white" ],
"coffee.svg": [ "coffee", "drink", "beverage", "orange" ],
"copy.svg": [ "copy", "ui-icon", "cut", "paste" ],
"dog-beagle.svg": [ "dog-beagle", "animal", "brown" ],
"dog-shiba.svg": [ "dog-shiba", "animal", "orange" ],
"device-computer.svg": [ "device-computer", "screen", "imac", "desktop", "pc", "ui-icon", "black", "white", "grey-gray" ],
"device-tablet.svg": [ "device-tablet", "screen", "ipad", "ui-icon", "black", "white", "grey-gray" ],
"device-smartphone.svg": [ "device-smartphone", "screen", "iphone", "ui-icon", "black", "white", "grey-gray" ],
"dog.svg": [ "dog", "full-body", "animal", "brown" ],
"dog-beagle.svg": [ "dog-beagle", "face", "animal", "brown" ],
"dog-shiba.svg": [ "dog-shiba", "face", "animal", "orange" ],
"dollar.svg": [ "dollar", "ui-icon", "yellow" ],
"earth.svg": [ "earth", "ui-icon", "blue" ],
"earth.svg": [ "earth", "globe", "global", "world", "ui-icon", "blue" ],
"edit.svg": [ "edit", "pencil", "paper", "ui-icon", "brown" ],
"export.svg": [ "export", "arrow", "out", "share", "ui-icon", "blue", "orange" ],
"facebook-detailed.svg": [ "facebook-detailed", "logo", "blue" ],
"facebook.svg": [ "facebook", "logo", "blue" ],
"file-picture.svg": [ "file-picture", "ui-icon" ],
"file-text.svg": [ "file-text", "ui-icon" ],
"file.svg": [ "file", "ui-icon" ],
"file-picture.svg": [ "file-picture", "paper", "drawing", "painting", "ui-icon", "blue" ],
"file-text.svg": [ "file-text", "paper", "ui-icon", "blue" ],
"file.svg": [ "file", "paper", "ui-icon", "blue" ],
"folder.svg": [ "folder", "ui-icon", "orange", "yellow" ],
"gear.svg": [ "gear", "ui-icon", "black" ],
"gift.svg": [ "gift", "red", "christmas", "xmas", "birthday", "bday", "present", "festive" ],
@ -66,30 +73,42 @@
"headphones.svg": [ "headphones", "ui-icon", "black", "grey-gray" ],
"heart.svg": [ "heart", "ui-icon", "red" ],
"house.svg": [ "house", "ui-icon" ],
"ice-cream.svg": [ "ice-cream", "dessert", "food", "ui-icon", "pink", "brown" ],
"inbox.svg": [ "inbox", "arrow", "email", "e-mail", "ui-icon", "blue", "orange" ],
"instagram-detailed.svg": [ "instagram-detailed", "logo", "purple", "magenta" ],
"instagram.svg": [ "instagram", "logo", "purple", "magenta" ],
"key.svg": [ "key", "ui-icon", "yellow" ],
"lock.svg": [ "lock", "ui-icon", "yellow", "orange" ],
"magnifier.svg": [ "magnifier", "zoom", "ui-icon", "brown", "white", "search" ],
"mail.svg": [ "mail", "email", "e-mail", "envelope", "ui-icon", "brown" ],
"mail-open.svg": [ "mail-open", "email", "e-mail", "envelope", "ui-icon", "brown", "blue" ],
"mailbox.svg": [ "mailbox", "inbox", "mail-box", "email", "e-mail", "envelope", "ui-icon", "red" ],
"message.svg": [ "message", "conversations", "chat-bubble", "private-message", "direct-message", "pm", "dm", "ui-icon", "blue" ],
"message-typing.svg": [ "message-typing", "conversations", "chat-bubble", "private-message", "direct-message", "pm", "dm", "ui-icon", "blue" ],
"messages.svg": [ "messages", "conversations", "chat-bubbles", "private-messages", "direct-messages", "pm", "dm", "ui-icon", "blue" ],
"mistletoe.svg": [ "mistletoe", "xmas", "christmas", "festive", "red", "green" ],
"moon.svg": [ "moon", "ui-icon", "yellow", "dark" ],
"nasilemak.svg": [ "nasilemak", "food", "green" ],
"outbox.svg": [ "outbox", "arrow", "email", "e-mail", "ui-icon", "blue", "orange" ],
"paper-bag.svg": [ "paper-bag", "ui-icon", "pink" ],
"paste.svg": [ "paste", "ui-icon", "cut", "copy" ],
"pear.svg": [ "pear", "fruit", "food", "green" ],
"pencil.svg": [ "pencil", "ui-icon", "yellow", "blue", "edit" ],
"phone.svg": [ "phone", "ui-icon", "red" ],
"photo.svg": [ "photo", "ui-icon", "blue" ],
"picture.svg": [ "picture", "ui-icon", "blue" ],
"picture.svg": [ "picture", "drawing", "painting", "ui-icon", "blue" ],
"pin.svg": [ "pin", "ui-icon", "red" ],
"plane.svg": [ "plane", "air-plane", "airplane", "aero-plane", "aeroplane", "aircraft", "vehicle", "transportation", "white", "red" ],
"pumpkin.svg": [ "pumpkin", "halloween", "spooky", "festive", "orange" ],
"rainbow.svg": [ "rainbow", "colorful", "colourful" ],
"rabbit-grey.svg": [ "rabbit-grey", "bunny", "full-body", "animal", "grey" ],
"rabbit-white.svg": [ "rabbit-white", "bunny", "full-body", "animal", "white" ],
"reddit-detailed.svg": [ "reddit-detailed", "logo", "red" ],
"reddit.svg": [ "reddit", "logo", "red" ],
"santa-face.svg": [ "santa-face", "xmas", "christmas", "festive", "red", "human" ],
"santa.svg": [ "santa-full", "xmas", "christmas", "festive", "red", "human" ],
"save.svg": [ "save", "floppy-disk", "ui-icon", "grey-gray", "black" ],
"scissors.svg": [ "scissors", "ui-icon", "cut", "copy", "paste", "purple", "pink" ],
"smartphone.svg": [ "smartphone", "ui-icon", "black", "white", "grey-gray" ],
"snowman.svg": [ "snowman", "white" ],
"sound-high.svg": [ "sound-high", "ui-icon", "yellow" ],
"sound-low.svg": [ "sound-low", "ui-icon", "yellow" ],

4
src/index.css
View File

@ -43,6 +43,10 @@ input {
background-color: var(--background-color);
}
input[type="text"]:focus {
outline: 0;
}
#wrapper {
width: 100%;
max-width: 1280px;