12 Commits
1.0.0 ... 1.6.0

Author SHA1 Message Date
8b80dae685 flags fix 2025-12-31 13:23:33 +05:00
c07dfeeed5 crown + work 2025-12-31 13:22:31 +05:00
a7308582a0 spэrma 2025-12-07 14:08:14 +07:00
369271a9c3 added server.css 2025-12-06 22:57:00 +07:00
d6a92fc4bf added eye.css and deleted empty telegram.css 2025-12-01 00:10:31 +07:00
cdce71a3d7 check.css 3em to 2em 2025-11-23 23:21:54 +07:00
9c4fbaeaa2 check.css improvement 2025-11-23 23:19:28 +07:00
8a83e90369 close.css improvements 2025-11-23 23:03:02 +07:00
ac7b707ebd check.css 2025-11-23 22:31:26 +07:00
cae2ed1a6c added icons and moved to the css directory 2025-11-23 17:35:49 +07:00
bd33bfae6b added demonstration images 2025-11-23 17:29:51 +07:00
56c1866467 loaded icons demonstrations 2025-11-23 17:24:57 +07:00
47 changed files with 639 additions and 31 deletions

0
LICENCE Normal file → Executable file
View File

5
README.md Normal file → Executable file
View File

@@ -13,3 +13,8 @@ more real and complex:
```HTML ```HTML
<button style="display: flex; gap: 1rem;"><i class="icon shopping cart"></i>Cart: 0</button> <button style="display: flex; gap: 1rem;"><i class="icon shopping cart"></i>Cart: 0</button>
``` ```
## Demonstration
<img src="assets/1.png" alt="Demonstration image" height="200"/>
<img src="assets/2.png" alt="Demonstration image" height="200"/><br/>
<img src="assets/3.png" alt="Demonstration image" height="200"/>

BIN
assets/1.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

BIN
assets/2.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.7 KiB

BIN
assets/3.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 19 KiB

View File

@@ -1,31 +0,0 @@
@charset "UTF-8";
i.icon.close {
--diameter: 22px;
box-sizing: border-box;
position: relative;
display: block;
width: var(--diameter);
height: var(--diameter);
border: 2px solid transparent;
border-radius: 40px;
}
i.icon.close::after,
i.icon.close::before {
content: "";
display: block;
box-sizing: border-box;
position: absolute;
width: 16px;
height: 2px;
background: currentColor;
transform: rotate(45deg);
border-radius: 5px;
top: 8px;
left: 1px;
}
i.icon.close::after {
transform: rotate(-45deg);
}

0
arrow.css → css/arrow.css Normal file → Executable file
View File

0
arrow_circle.css → css/arrow_circle.css Normal file → Executable file
View File

44
css/award.css Executable file
View File

@@ -0,0 +1,44 @@
@charset "UTF-8";
i.icon.award {
position: relative;
width: 16px;
height: 20px;
box-sizing: border-box;
display: block;
border: 4px solid transparent;
border-top: 12px solid transparent;
border-bottom: 0;
box-shadow:
inset 4px 0 0 -2px,
inset -4px 0 0 -2px;
&::after,
&::before {
position: absolute;
content: "";
box-sizing: border-box;
display: block;
border: 2px solid;
}
&::before {
top: -12px;
left: -3px;
width: 14px;
height: 14px;
border-radius: 22px;
}
&::after {
bottom: -3px;
left: 1px;
width: 6px;
height: 6px;
border-bottom-left-radius: 1px;
border-top-right-radius: 1px;
border-right-color: transparent;
border-bottom-color: transparent;
transform: rotate(45deg);
}
}

0
calculator.css → css/calculator.css Normal file → Executable file
View File

30
css/check.css Executable file
View File

@@ -0,0 +1,30 @@
@charset "UTF-8";
i.icon.check {
--width: 2em;
--height: 1.5em;
--up: 10px;
--down: 6px;
position: relative;
width: var(--width);
height: var(--height);
box-sizing: border-box;
display: block;
border-radius: 100px;
border: 2px solid transparent;
&::after {
position: absolute;
content: "";
top: -0.3em;
left: 0.4em;
width: var(--down);
height: var(--up);
box-sizing: border-box;
display: block;
border-width: 0 2px 2px 0;
border-style: solid;
transform-origin: bottom left;
transform: rotate(45deg);
}
}

36
css/close.css Executable file
View File

@@ -0,0 +1,36 @@
@charset "UTF-8";
i.icon.close {
--diameter: 2em;
--size: 1.5em;
position: relative;
width: var(--diameter);
height: var(--diameter);
box-sizing: border-box;
display: block;
border-radius: 40px;
border: 0.2em solid transparent;
&:is(.small) {
--size: 1.2em;
}
&::after,
&::before {
top: 0.7em;
left: 0.2em;
position: absolute;
content: "";
width: var(--size, 1.5em);
height: 2px;
box-sizing: border-box;
display: block;
border-radius: 5px;
background-color: currentColor;
transform: rotate(45deg);
}
&::after {
transform: rotate(-45deg);
}
}

36
css/code_slash.css Executable file
View File

@@ -0,0 +1,36 @@
@charset "UTF-8";
i.icon.code.slash {
position: relative;
width: 2px;
height: 16px;
box-sizing: border-box;
display: block;
transform: rotate(15deg);
background: currentColor;
&::after,
&::before {
position: absolute;
content: "";
width: 8px;
height: 8px;
box-sizing: border-box;
display: block;
transform: rotate(-60deg);
}
&::before {
top: 5px;
left: -8px;
border-top: 2px solid;
border-left: 2px solid;
}
&::after {
top: 3px;
right: -8px;
border-right: 2px solid;
border-bottom: 2px solid;
}
}

46
css/coffe.css Executable file
View File

@@ -0,0 +1,46 @@
@charset "UTF-8";
i.icon.coffe {
position: relative;
margin-top: 3px;
margin-left: -4px;
width: 18px;
height: 14px;
box-sizing: border-box;
display: block;
border-radius: 6px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: 2px solid;
&::after,
&::before {
content: "";
position: absolute;
box-sizing: border-box;
display: block;
}
&::before {
top: -7px;
left: 2px;
width: 2px;
height: 4px;
border-radius: 3px;
background: currentColor;
box-shadow:
4px 0 0,
8px 0 0;
}
&::after {
top: -1px;
right: -6px;
width: 6px;
height: 8px;
border-radius: 100px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border: 2px solid;
}
}

0
comment.css → css/comment.css Normal file → Executable file
View File

0
corner.css → css/corner.css Normal file → Executable file
View File

38
css/crown.css Executable file
View File

@@ -0,0 +1,38 @@
@charset "UTF-8";
i.icon.crown {
position: relative;
width: 19px;
height: 12px;
box-sizing: border-box;
padding-top: 4px;
display: block;
border: 2px solid;
border-top-color: transparent;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
&:after,
&:before {
content: '';
position: absolute;
top: -4px;
width: 8px;
height: 8px;
box-sizing: border-box;
display: block;
border-bottom: 2px solid;
border-left: 2px solid;
transform: rotate(-45deg);
}
&:before {
left: -1px;
border-top-left-radius: 2px;
}
&:after {
right: -1px;
border-bottom-right-radius: 2px;
}
}

0
display_grid.css → css/display_grid.css Normal file → Executable file
View File

0
enter.css → css/enter.css Normal file → Executable file
View File

34
css/ethernet.css Executable file
View File

@@ -0,0 +1,34 @@
@charset "UTF-8";
i.icon.ethernet {
position: relative;
width: 16px;
height: 20px;
box-sizing: border-box;
display: block;
border: 2px solid;
box-shadow: 0 10px 0 -7px;
&::after,
&::before {
position: absolute;
top: 6px;
content: "";
box-sizing: border-box;
display: block;
}
&::before {
left: 2px;
width: 8px;
height: 8px;
border: 2px solid;
border-top: 0;
}
&::after {
left: -2px;
width: 16px;
height: 2px;
border-left: 6px solid;
border-right: 6px solid;
}
}

59
css/eye.css Executable file
View File

@@ -0,0 +1,59 @@
@charset "UTF-8";
i.icon.eye {
position: relative;
width: 24px;
height: 18px;
display: block;
box-sizing: border-box;
overflow: hidden;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
:is(.small) {
width: 21px;
height: 15px;
border-bottom-right-radius: 70px;
border-bottom-left-radius: 70px;
&::before {
left: var(--left, 7px);
bottom: var(--bottom, 3px);
width: 7px;
height: 7px;
}
&::after {
width: 21px;
height: 21px;
}
}
&::before,
&::after {
content: "";
position: absolute;
display: block;
box-sizing: border-box;
border-radius: 100px;
}
&::before {
left: var(--left, 8px);
bottom: var(--bottom, 4px);
width: 8px;
height: 8px;
border: 2px solid var(--text-color-active, #000);
transition: var(--transition, 0) ease-out;
transform: rotateX(var(--offset-x, 0)) rotateY(var(--offset-y, 0));
}
&::after {
top: 2px;
width: 24px;
height: 24px;
box-shadow:
inset 0 -8px 0 2px,
inset 0 0 0 2px;
}
}

51
css/gift.css Executable file
View File

@@ -0,0 +1,51 @@
@charset "UTF-8";
i.icon.gift {
position: relative;
margin-top: 8px;
width: 22px;
height: 14px;
box-sizing: border-box;
display: block;
border: 2px solid transparent;
background:
linear-gradient(to left, currentColor 10px, transparent 0),
linear-gradient(to left, currentColor 10px, transparent 0),
linear-gradient(to left, currentColor 10px, transparent 0);
background-position:
8px 0,
18px -8px,
-2px -8px;
background-repeat: no-repeat;
background-size:
2px 10px,
2px 10px,
2px 10px;
box-shadow:
inset 2px 0 0,
inset -2px 0 0,
0 -2px 0,
inset 0 2px 0,
inset 0 -2px 0;
&::after,
&::before {
position: absolute;
top: -10px;
content: "";
width: 6px;
height: 8px;
box-sizing: border-box;
display: block;
border-radius: 3px;
border: 2px solid;
}
&::after {
left: 3px;
transform: rotate(-45deg);
}
&::before {
right: 3px;
transform: rotate(45deg);
}
}

0
hashtag.css → css/hashtag.css Normal file → Executable file
View File

0
house.css → css/house.css Normal file → Executable file
View File

0
house_panelka.css → css/house_panelka.css Normal file → Executable file
View File

0
layout_grid.css → css/layout_grid.css Normal file → Executable file
View File

0
list_add.css → css/list_add.css Normal file → Executable file
View File

34
css/list_tree.css Executable file
View File

@@ -0,0 +1,34 @@
@charset "UTF-8";
i.icon.list.tree {
position: relative;
width: 22px;
height: 22px;
box-sizing: border-box;
display: block;
background:
linear-gradient(to left, currentcolor 8px, transparent 0) no-repeat left
top/8px 8px,
linear-gradient(to left, currentcolor 8px, transparent 0) no-repeat center
3px/8px 2px,
linear-gradient(to left, currentcolor 8px, transparent 0) no-repeat 10px
17px/6px 2px,
linear-gradient(to left, currentcolor 8px, transparent 0) no-repeat 10px
3px/2px 16px;
&::after,
&::before {
position: absolute;
right: 0;
content: '';
width: 8px;
height: 8px;
box-sizing: border-box;
display: block;
border: 2px solid;
}
&::after {
bottom: 0;
}
}

0
loading_spinner.css → css/loading_spinner.css Normal file → Executable file
View File

0
minus.css → css/minus.css Normal file → Executable file
View File

0
pen.css → css/pen.css Normal file → Executable file
View File

47
css/phone.css Executable file
View File

@@ -0,0 +1,47 @@
@charset "UTF-8";
i.icon.phone {
position: relative;
width: 22px;
height: 22px;
box-sizing: border-box;
display: block;
&::after,
&::before {
position: absolute;
content: '';
box-sizing: border-box;
display: block;
}
&::after {
bottom: 2px;
left: 2px;
width: 18px;
height: 18px;
border-top-left-radius: 1px;
border-bottom-right-radius: 1px;
border-bottom-left-radius: 12px;
border-bottom: 4px solid;
border-left: 4px solid;
background:
linear-gradient(to left, currentColor 10px, transparent 0) no-repeat right
11px/6px 4px,
linear-gradient(to left, currentColor 10px, transparent 0) no-repeat -1px
0/4px 6px;
}
&::before {
bottom: 2px;
left: 2px;
width: 20px;
height: 20px;
border: 6px double;
border-radius: 50%;
border-top-color: transparent;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(-45deg);
}
}

0
pin.css → css/pin.css Normal file → Executable file
View File

0
plus.css → css/plus.css Normal file → Executable file
View File

0
search.css → css/search.css Normal file → Executable file
View File

36
css/server.css Executable file
View File

@@ -0,0 +1,36 @@
@charset "UTF-8";
i.icon.server {
position: relative;
width: 16px;
height: 20px;
box-sizing: border-box;
display: block;
border-radius: 3px;
border: 2px solid;
&::after,
&::before {
position: absolute;
content: "";
height: 2px;
box-sizing: border-box;
display: block;
background-color: currentColor;
}
&:before {
top: 2px;
left: 2px;
width: 8px;
border-radius: 3px;
box-shadow: 0 4px 0;
}
&::after {
bottom: 2px;
left: 5px;
width: 2px;
border-radius: 10px;
}
}

0
share.css → css/share.css Normal file → Executable file
View File

0
shopping_bag.css → css/shopping_bag.css Normal file → Executable file
View File

0
shopping_cart.css → css/shopping_cart.css Normal file → Executable file
View File

0
site.css → css/site.css Normal file → Executable file
View File

0
smile.css → css/smile.css Normal file → Executable file
View File

37
css/terminal.css Executable file
View File

@@ -0,0 +1,37 @@
@charset "UTF-8";
i.icon.terminal {
position: relative;
width: 24px;
height: 20px;
box-sizing: border-box;
display: block;
border-radius: 2px;
border: 2px solid;
&::after,
&::before {
position: absolute;
content: '';
display: block;
box-sizing: border-box;
}
&::before {
top: 5px;
left: 3px;
width: 6px;
height: 6px;
border-right: 2px solid;
border-bottom: 2px solid;
transform: rotate(-45deg);
}
&::after {
top: 10px;
left: 11px;
width: 4px;
height: 2px;
background-color: currentColor;
}
}

0
trash.css → css/trash.css Normal file → Executable file
View File

38
css/trend.css Executable file
View File

@@ -0,0 +1,38 @@
@charset "UTF-8";
i.icon.trend {
position: relative;
width: 10px;
height: 8px;
box-sizing: border-box;
display: block;
border-top: 2px solid;
border-right: 2px solid;
transform: rotate(-45deg);
&::after,
&::before {
position: absolute;
content: "";
box-sizing: border-box;
display: block;
}
&::before {
bottom: 0;
left: 8px;
width: 10px;
height: 2px;
background-color: currentColor;
}
&::after {
right: -14px;
bottom: -3px;
width: 0;
height: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 6px solid;
}
}

41
css/trophy.css Executable file
View File

@@ -0,0 +1,41 @@
@charset "UTF-8";
i.icon.trophy {
position: relative;
width: 10px;
height: 12px;
box-sizing: border-box;
display: block;
border-bottom-right-radius: 100px;
border-bottom-left-radius: 100px;
border: 2px solid;
&::after,
&::before {
position: absolute;
content: '';
box-sizing: border-box;
display: block;
}
&::before {
bottom: -4px;
left: 0;
width: 6px;
height: 4px;
border-right: 2px solid transparent;
border-left: 2px solid transparent;
box-shadow:
inset 0 0 0 2px,
0 2px 0 0;
}
&::after {
top: 0;
left: -5px;
width: 16px;
height: 6px;
border-right: 2px solid;
border-left: 2px solid;
}
}

0
user.css → css/user.css Normal file → Executable file
View File

27
css/work.css Executable file
View File

@@ -0,0 +1,27 @@
@charset "UTF-8";
i.icon.work,
i.icon.work::after {
display: block;
box-sizing: border-box;
box-shadow: 0 0 0 2px;
}
i.icon.work {
position: relative;
width: 14px;
height: 10px;
border-radius: 1px;
}
i.icon.work::after {
top: -3px;
left: 4px;
position: absolute;
content: '';
width: 6px;
height: 1px;
border-top-right-radius: 1px;
border-top-left-radius: 1px;
}