/* ============================================================
 * SICONS — Open-Source Pure CSS Span-Based Icon Library
 * ============================================================
 * Zero dependencies. No fonts. No images. No JS. No CDN.
 * MIT License — free for any use.
 * 
 * Usage: <span class="sicon sicon-home"></span>
 * Sizes: .sicon-sm (16px)  .sicon (20px)  .sicon-lg (24px)
 *        .sicon-xl (32px)  .sicon-2x (40px)  .sicon-3x (56px)
 * ============================================================ */

/* ── Base ── */
.sicon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; vertical-align: middle; position: relative;
    box-sizing: border-box;
}
.sicon::before, .sicon::after { content: ''; box-sizing: border-box; position: absolute; }
.sicon-sm  { width: 16px; height: 16px; }
.sicon-lg  { width: 24px; height: 24px; }
.sicon-xl  { width: 32px; height: 32px; }
.sicon-2x  { width: 40px; height: 40px; }
.sicon-3x  { width: 56px; height: 56px; }
.sicon-spin { animation: sicon-spin 1s linear infinite; }
@keyframes sicon-spin { 100% { transform: rotate(360deg); } }

/* ── Navigation ── */

/* home: house shape */
.sicon-home::before {
    top: 35%; left: 10%; width: 80%; height: 55%;
    border: 2px solid currentColor; border-bottom: none;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.sicon-home::after {
    bottom: 10%; left: 30%; width: 40%; height: 40%;
    border: 2px solid currentColor; border-top: none;
}

/* hamburger menu */
.sicon-menu::before {
    top: 20%; left: 15%; width: 70%; height: 2px;
    background: currentColor;
    box-shadow: 0 6px 0 currentColor, 0 12px 0 currentColor;
}

/* close / x */
.sicon-close::before, .sicon-close::after {
    top: 10%; left: 45%; width: 2px; height: 80%;
    background: currentColor; border-radius: 1px;
}
.sicon-close::before { transform: rotate(45deg); }
.sicon-close::after  { transform: rotate(-45deg); }

/* ── Arrows ── */

/* chevron-down */
.sicon-chevron-down::before {
    top: 30%; left: 15%; width: 35%; height: 35%;
    border: 2px solid currentColor; border-top: none; border-left: none;
    transform: rotate(45deg);
}

/* chevron-up */
.sicon-chevron-up::before {
    top: 30%; left: 15%; width: 35%; height: 35%;
    border: 2px solid currentColor; border-bottom: none; border-right: none;
    transform: rotate(45deg);
}

/* chevron-left */
.sicon-chevron-left::before {
    top: 25%; left: 30%; width: 35%; height: 35%;
    border: 2px solid currentColor; border-top: none; border-right: none;
    transform: rotate(45deg);
}

/* chevron-right */
.sicon-chevron-right::before {
    top: 25%; left: 25%; width: 35%; height: 35%;
    border: 2px solid currentColor; border-bottom: none; border-left: none;
    transform: rotate(45deg);
}

/* arrow-up */
.sicon-arrow-up::before {
    top: 15%; left: 45%; width: 2px; height: 60%;
    background: currentColor;
}
.sicon-arrow-up::after {
    top: 15%; left: 30%; width: 35%; height: 35%;
    border: 2px solid currentColor; border-bottom: none; border-right: none;
    transform: rotate(45deg);
}

/* arrow-down */
.sicon-arrow-down::before {
    top: 25%; left: 45%; width: 2px; height: 60%;
    background: currentColor;
}
.sicon-arrow-down::after {
    top: 40%; left: 30%; width: 35%; height: 35%;
    border: 2px solid currentColor; border-top: none; border-left: none;
    transform: rotate(45deg);
}

/* arrow-left */
.sicon-arrow-left::before {
    top: 45%; left: 15%; width: 70%; height: 2px;
    background: currentColor;
}
.sicon-arrow-left::after {
    top: 30%; left: 15%; width: 35%; height: 35%;
    border: 2px solid currentColor; border-top: none; border-right: none;
    transform: rotate(45deg);
}

/* arrow-right */
.sicon-arrow-right::before {
    top: 45%; left: 15%; width: 70%; height: 2px;
    background: currentColor;
}
.sicon-arrow-right::after {
    top: 30%; left: 48%; width: 35%; height: 35%;
    border: 2px solid currentColor; border-bottom: none; border-left: none;
    transform: rotate(45deg);
}

/* ── Status ── */

/* check */
.sicon-check::before {
    top: 45%; left: 20%; width: 30%; height: 55%;
    border: 2px solid currentColor; border-top: none; border-right: none;
    transform: rotate(-45deg) translate(15%, -15%);
}

/* plus */
.sicon-plus::before, .sicon-plus::after {
    background: currentColor; border-radius: 1px;
}
.sicon-plus::before { top: 15%; left: 43%; width: 14%; height: 70%; }
.sicon-plus::after  { top: 43%; left: 15%; width: 70%; height: 14%; }

/* minus */
.sicon-minus::before {
    top: 43%; left: 15%; width: 70%; height: 14%;
    background: currentColor; border-radius: 1px;
}

/* star */
.sicon-star::before {
    top: 5%; left: 5%; width: 90%; height: 90%;
    background: currentColor;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%,
                       50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* heart */
.sicon-heart::before {
    top: 15%; left: 10%; width: 80%; height: 75%;
    background: currentColor;
    clip-path: polygon(50% 15%, 65% 0%, 85% 5%, 100% 25%, 95% 55%,
                       65% 95%, 50% 100%, 35% 95%, 5% 55%, 0% 25%,
                       15% 5%, 35% 0%);
}

/* exclamation / warning triangle */
.sicon-warning::before {
    top: 8%; left: 8%; width: 84%; height: 80%;
    background: currentColor;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.sicon-warning::after {
    top: 62%; left: 42%; width: 16%; height: 18%;
    background: #0d1117; border-radius: 1px;
}

/* info circle */
.sicon-info::before {
    top: 5%; left: 5%; width: 90%; height: 90%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-info::after {
    top: 20%; left: 42%; width: 16%; height: 50%;
    background: currentColor; border-radius: 2px;
}

/* question circle */
.sicon-question::before {
    top: 5%; left: 5%; width: 90%; height: 90%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-question::after {
    top: 65%; left: 42%; width: 16%; height: 16%;
    background: currentColor; border-radius: 50%;
}

/* lock */
.sicon-lock::before {
    top: 40%; left: 15%; width: 70%; height: 50%;
    border: 2px solid currentColor; border-radius: 5%;
    background: currentColor;
}
.sicon-lock::after {
    top: 10%; left: 25%; width: 50%; height: 40%;
    border: 2px solid currentColor; border-bottom: none;
    border-radius: 40% 40% 0 0;
}

/* unlock */
.sicon-unlock::before {
    top: 40%; left: 15%; width: 70%; height: 50%;
    border: 2px solid currentColor; border-radius: 5%;
}
.sicon-unlock::after {
    top: 10%; left: 45%; width: 30%; height: 40%;
    border: 2px solid currentColor; border-bottom: none;
    border-radius: 40% 40% 0 0;
}

/* shield */
.sicon-shield::before {
    top: 5%; left: 20%; width: 60%; height: 90%;
    background: currentColor;
    clip-path: polygon(50% 0%, 100% 10%, 100% 50%, 80% 80%, 50% 100%,
                       20% 80%, 0% 50%, 0% 10%);
}

/* ── Media & Content ── */

/* search / magnifying glass */
.sicon-search::before {
    top: 10%; left: 10%; width: 55%; height: 55%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-search::after {
    top: 58%; left: 55%; width: 2px; height: 30%;
    background: currentColor; border-radius: 1px;
    transform: rotate(-45deg); transform-origin: top;
}

/* eye */
.sicon-eye::before {
    top: 20%; left: 5%; width: 90%; height: 50%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-eye::after {
    top: 35%; left: 35%; width: 30%; height: 30%;
    background: currentColor; border-radius: 50%;
}

/* download */
.sicon-download::before {
    top: 20%; left: 45%; width: 10%; height: 50%;
    background: currentColor;
}
.sicon-download::after {
    top: 55%; left: 15%; width: 70%; height: 2px;
    background: currentColor;
}

/* upload */
.sicon-upload::before {
    top: 30%; left: 45%; width: 10%; height: 50%;
    background: currentColor;
}
.sicon-upload::after {
    top: 20%; left: 15%; width: 70%; height: 2px;
    background: currentColor;
}

/* link */
.sicon-link::before {
    top: 25%; left: 5%; width: 40%; height: 35%;
    border: 2px solid currentColor; border-right: none; border-radius: 40% 0 0 40%;
}
.sicon-link::after {
    top: 25%; left: 45%; width: 40%; height: 35%;
    border: 2px solid currentColor; border-left: none; border-radius: 0 40% 40% 0%;
}

/* globe */
.sicon-globe::before {
    top: 10%; left: 10%; width: 80%; height: 80%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-globe::after {
    top: 10%; left: 42%; width: 16%; height: 80%; background: none;
    border-left: 2px solid currentColor; border-right: 2px solid currentColor;
    border-radius: 50%;
}

/* calendar */
.sicon-calendar::before {
    top: 5%; left: 10%; width: 80%; height: 90%;
    border: 2px solid currentColor; border-radius: 4px;
}
.sicon-calendar::after {
    top: 5%; left: 10%; width: 80%; height: 20%;
    background: currentColor; border-radius: 4px 4px 0 0;
}

/* clock */
.sicon-clock::before {
    top: 10%; left: 10%; width: 80%; height: 80%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-clock::after {
    top: 25%; left: 45%; width: 2px; height: 30%;
    background: currentColor; transform-origin: bottom;
}

/* image */
.sicon-image::before {
    top: 5%; left: 5%; width: 90%; height: 85%;
    border: 2px solid currentColor; border-radius: 6px;
}
.sicon-image::after {
    bottom: 10%; left: 10%; width: 40%; height: 40%;
    border: 2px solid currentColor; border-radius: 50%;
}

/* film */
.sicon-video::before {
    top: 10%; left: 5%; width: 90%; height: 80%;
    border: 2px solid currentColor; border-radius: 4px;
}
.sicon-video::after {
    top: 30%; left: 65%; width: 30%; height: 30%;
    background: currentColor;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}

/* music note */
.sicon-music::before {
    top: 5%; left: 20%; width: 30%; height: 55%;
    border: 2px solid currentColor; border-radius: 4px;
}
.sicon-music::after {
    top: 20%; left: 45%; width: 2px; height: 70%;
    background: currentColor;
}

/* camera */
.sicon-camera::before {
    top: 15%; left: 10%; width: 80%; height: 60%;
    border: 2px solid currentColor; border-radius: 6px;
}
.sicon-camera::after {
    top: 18%; left: 35%; width: 30%; height: 25%;
    border: 2px solid currentColor; border-radius: 4px;
}

/* ── Files & Folders ── */

/* folder */
.sicon-folder::before {
    top: 10%; left: 5%; width: 90%; height: 80%;
    background: currentColor; border-radius: 3px 6px 6px 6px;
}

/* file */
.sicon-file::before {
    top: 5%; left: 15%; width: 70%; height: 90%;
    border: 2px solid currentColor; border-radius: 2px 8px 8px 8px;
}
.sicon-file::after {
    top: 5%; left: 40%; width: 45%; height: 20%;
    border: 2px solid currentColor; border-left: none; border-bottom: none;
    border-radius: 0 8px 0 0;
}

/* ── User & People ── */

/* user / person */
.sicon-user::before {
    top: 5%; left: 25%; width: 50%; height: 40%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-user::after {
    top: 50%; left: 5%; width: 90%; height: 45%;
    border: 2px solid currentColor; border-radius: 50% 50% 5% 5%;
    border-bottom: none;
}

/* users / people */
.sicon-users::before {
    top: 15%; left: 5%; width: 40%; height: 30%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-users::after {
    top: 15%; left: 45%; width: 40%; height: 30%;
    border: 2px solid currentColor; border-radius: 50%;
}

/* ── Communication ── */

/* mail / envelope */
.sicon-mail::before {
    top: 17%; left: 5%; width: 90%; height: 66%;
    border: 2px solid currentColor;
}
.sicon-mail::after {
    top: 17%; left: 5%; width: 90%; height: 2px;
    background: currentColor; transform-origin: left;
    transform: rotate(-10deg) scaleX(1.1);
}

/* phone */
.sicon-phone::before {
    top: 8%; left: 20%; width: 50%; height: 70%;
    border: 2px solid currentColor; border-radius: 6px;
}

/* chat / comment */
.sicon-chat::before {
    top: 5%; left: 5%; width: 85%; height: 70%;
    border: 2px solid currentColor; border-radius: 6px;
}
.sicon-chat::after {
    bottom: 5%; left: 20%; width: 20%; height: 20%;
    border: 2px solid currentColor; border-top: none; border-right: none;
    transform: rotate(-45deg);
}

/* ── Shopping ── */

/* cart */
.sicon-cart::before {
    top: 10%; left: 10%; width: 60%; height: 60%;
    border: 2px solid currentColor; border-radius: 4px;
}

/* tag */
.sicon-tag::before {
    top: 10%; left: 15%; width: 70%; height: 55%;
    border: 2px solid currentColor; border-radius: 2px 6px 6px 2px;
}
.sicon-tag::after {
    top: 44%; left: 70%; width: 22%; height: 22%;
    background: currentColor; border-radius: 50%;
}

/* bookmark */
.sicon-bookmark::before {
    top: 5%; left: 20%; width: 60%; height: 90%;
    border: 2px solid currentColor;
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 50% 75%, 0% 100%);
}

/* ── Edit ── */

/* pencil / edit */
.sicon-edit::before {
    top: 10%; left: 30%; width: 55%; height: 60%;
    border: 2px solid currentColor; border-radius: 3px;
    transform: rotate(-30deg);
}

/* trash / delete */
.sicon-trash::before {
    top: 15%; left: 15%; width: 70%; height: 60%;
    border: 2px solid currentColor; border-top: none; border-radius: 0 0 4px 4px;
}
.sicon-trash::after {
    top: 10%; left: 5%; width: 90%; height: 2px;
    background: currentColor;
}

/* ── Settings & Tools ── */

/* gear / settings */
.sicon-settings::before {
    top: 12%; left: 12%; width: 76%; height: 76%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-settings::after {
    top: 5%; left: 42%; width: 16%; height: 90%;
    background: currentColor;
}

/* wrench */
.sicon-wrench::before {
    top: 50%; left: 10%; width: 70%; height: 12%;
    background: currentColor; border-radius: 2px;
    transform: rotate(-45deg); transform-origin: left;
}

/* filter */
.sicon-filter::before {
    top: 15%; left: 10%; width: 80%; height: 2px;
    background: currentColor;
}
.sicon-filter::after {
    top: 15%; left: 35%; width: 30%; height: 50%;
    border: 2px solid currentColor; border-top: none;
}

/* sort */
.sicon-sort::before {
    top: 15%; left: 20%; width: 60%; height: 2px;
    background: currentColor;
    box-shadow: 0 12px 0 currentColor, 0 24px 0 currentColor;
    transition: transform 0.2s;
}

/* ── Tech / Code ── */

/* code */
.sicon-code::before {
    top: 20%; left: 5%; width: 35%; height: 50%;
    border: 2px solid currentColor; border-right: none; border-radius: 6px 0 0 6px;
}
.sicon-code::after {
    top: 20%; left: 55%; width: 35%; height: 50%;
    border: 2px solid currentColor; border-left: none; border-radius: 0 6px 6px 0;
}

/* terminal */
.sicon-terminal::before {
    top: 5%; left: 5%; width: 90%; height: 70%;
    border: 2px solid currentColor; border-radius: 6px;
}
.sicon-terminal::after {
    top: 20%; left: 15%; width: 25%; height: 20%;
    border: 2px solid currentColor; border-top: none; border-right: none;
    transform: rotate(-45deg);
}

/* database */
.sicon-database::before {
    top: 5%; left: 15%; width: 70%; height: 85%;
    border: 2px solid currentColor;
    box-shadow: 0 -12px 0 -2px currentColor, 0 12px 0 -3px currentColor;
    border-radius: 6px;
}

/* server */
.sicon-server::before {
    top: 5%; left: 10%; width: 80%; height: 85%;
    border: 2px solid currentColor; border-radius: 4px;
}
.sicon-server::after {
    top: 30%; left: 10%; width: 80%; height: 2px;
    background: currentColor;
}

/* cloud */
.sicon-cloud::before {
    top: 35%; left: 10%; width: 80%; height: 55%;
    border: 2px solid currentColor; border-radius: 8px;
}

/* bug */
.sicon-bug::before {
    top: 10%; left: 20%; width: 60%; height: 55%;
    border: 2px solid currentColor; border-radius: 8px;
}
.sicon-bug::after {
    top: 15%; left: 15%; width: 15%; height: 2px;
    background: currentColor;
}

/* sun */
.sicon-sun::before {
    top: 10%; left: 10%; width: 80%; height: 80%;
    border-radius: 50%; border: 2px solid currentColor;
}

/* moon */
.sicon-moon::before {
    top: 8%; left: 15%; width: 70%; height: 70%;
    border-radius: 50%; background: currentColor;
}

/* ── Misc ── */

/* spinner / loader */
.sicon-spinner::before {
    top: 8%; left: 8%; width: 84%; height: 84%;
    border: 3px solid transparent; border-top-color: currentColor;
    border-radius: 50%; animation: sicon-spin 0.8s linear infinite;
}

/* external link */
.sicon-external::before {
    top: 10%; left: 10%; width: 60%; height: 60%;
    border: 2px solid currentColor; border-radius: 2px;
}
.sicon-external::after {
    top: 10%; left: 55%; width: 35%; height: 35%;
    border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}

/* copy */
.sicon-copy::before {
    top: 10%; left: 30%; width: 60%; height: 70%;
    border: 2px solid currentColor; border-radius: 2px;
}
.sicon-copy::after {
    top: 5%; left: 5%; width: 60%; height: 70%;
    border: 2px solid currentColor; border-radius: 2px;
    background: #0d1117;
}

/* share */
.sicon-share::before {
    top: 30%; left: 42%; width: 16%; height: 60%;
    background: currentColor;
}
.sicon-share::after {
    top: 15%; left: 15%; width: 60%; height: 40%;
    border: 2px solid currentColor; border-radius: 50%;
}

/* play */
.sicon-play::before {
    top: 15%; left: 25%; width: 60%; height: 70%;
    background: currentColor;
    clip-path: polygon(10% 0%, 100% 50%, 10% 100%);
}

/* pause */
.sicon-pause::before {
    top: 15%; left: 20%; width: 20%; height: 70%;
    background: currentColor; border-radius: 2px;
}
.sicon-pause::after {
    top: 15%; left: 55%; width: 20%; height: 70%;
    background: currentColor; border-radius: 2px;
}

/* stop */
.sicon-stop::before {
    top: 15%; left: 15%; width: 70%; height: 70%;
    background: currentColor; border-radius: 3px;
}

/* print */
.sicon-print::before {
    top: 15%; left: 10%; width: 80%; height: 55%;
    border: 2px solid currentColor; border-radius: 4px;
}

/* map pin */
.sicon-pin::before {
    top: 8%; left: 25%; width: 50%; height: 65%;
    background: currentColor; border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}
.sicon-pin::after {
    top: 48%; left: 42%; width: 16%; height: 16%;
    background: #0d1117; border-radius: 50%;
}

/* gift */
.sicon-gift::before {
    top: 5%; left: 10%; width: 80%; height: 65%;
    border: 2px solid currentColor; border-radius: 3px;
}
.sicon-gift::after {
    top: 5%; left: 38%; width: 24%; height: 85%;
    border-left: 2px solid currentColor; border-right: 2px solid currentColor;
}

/* credit card */
.sicon-credit-card::before {
    top: 10%; left: 5%; width: 90%; height: 75%;
    border: 2px solid currentColor; border-radius: 6px;
}

/* key */
.sicon-key::before {
    top: 15%; left: 5%; width: 60%; height: 25%;
    border: 2px solid currentColor; border-radius: 4px;
}
.sicon-key::after {
    top: 38%; left: 5%; width: 2px; height: 50%;
    background: currentColor;
}

/* bell */
.sicon-bell::before {
    top: 8%; left: 20%; width: 60%; height: 65%;
    background: currentColor;
    clip-path: polygon(50% 0%, 80% 20%, 90% 60%, 95% 80%, 80% 85%,
                       65% 85%, 60% 100%, 40% 100%, 35% 85%, 20% 85%,
                       5% 80%, 10% 60%, 20% 20%);
}

/* lightbulb */
.sicon-lightbulb::before {
    top: 5%; left: 25%; width: 50%; height: 60%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-lightbulb::after {
    bottom: 10%; left: 35%; width: 30%; height: 20%;
    border: 2px solid currentColor; border-radius: 0 0 4px 4px;
}

/* rocket */
.sicon-rocket::before {
    top: 5%; left: 25%; width: 50%; height: 75%;
    border: 2px solid currentColor; border-radius: 50% 50% 10% 10%;
}

/* fire */
.sicon-fire::before {
    top: 5%; left: 20%; width: 60%; height: 85%;
    background: currentColor;
    clip-path: polygon(50% 0%, 75% 30%, 85% 50%, 70% 70%, 50% 50%,
                       30% 70%, 15% 50%, 25% 30%);
}

/* gamepad */
.sicon-gamepad::before {
    top: 15%; left: 5%; width: 90%; height: 55%;
    border: 2px solid currentColor; border-radius: 6px;
}

/* crown */
.sicon-crown::before {
    top: 4%; left: 8%; width: 84%; height: 70%;
    background: currentColor;
    clip-path: polygon(0% 100%, 15% 30%, 30% 50%, 50% 0%, 70% 50%, 85% 30%, 100% 100%);
}

/* cube / box */
.sicon-cube::before {
    top: 10%; left: 10%; width: 80%; height: 80%;
    border: 2px solid currentColor; border-radius: 4px;
}

/* grid */
.sicon-grid::before {
    top: 10%; left: 10%; width: 30%; height: 30%;
    box-shadow: 45% 0 0 0 currentColor, 0 45% 0 0 currentColor, 45% 45% 0 0 currentColor;
    background: currentColor; border-radius: 2px;
}

/* list */
.sicon-list::before {
    top: 15%; left: 5%; width: 80%; height: 5%;
    background: currentColor;
    box-shadow: 0 15px 0 currentColor, 0 30px 0 currentColor, 0 45px 0 currentColor;
    border-radius: 2px;
}

/* trophy */
.sicon-trophy::before {
    top: 5%; left: 15%; width: 70%; height: 70%;
    border: 2px solid currentColor; border-radius: 6px;
}

/* chart bar */
.sicon-chart::before {
    bottom: 8%; left: 5%; width: 15%; height: 40%;
    background: currentColor; border-radius: 2px 2px 0 0;
    box-shadow: 22% 0 0 currentColor, 44% 0 0 currentColor, 66% 0 0 currentColor;
}

/* thumbs-up */
.sicon-like::before {
    top: 10%; left: 10%; width: 35%; height: 60%;
    border: 2px solid currentColor; border-radius: 3px;
}
.sicon-like::after {
    top: 10%; left: 45%; width: 40%; height: 35%;
    border: 2px solid currentColor; border-radius: 50%;
}

/* eye-slash */
.sicon-eye-slash::before {
    top: 20%; left: 5%; width: 90%; height: 50%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-eye-slash::after {
    top: 5%; left: 45%; width: 2px; height: 90%;
    background: currentColor; transform: rotate(45deg);
}

/* pallette */
.sicon-palette::before {
    top: 8%; left: 8%; width: 84%; height: 84%;
    background: currentColor; border-radius: 50%;
}

/* dice */
.sicon-dice::before {
    top: 8%; left: 8%; width: 84%; height: 84%;
    border: 2px solid currentColor; border-radius: 6px;
}
.sicon-dice::after {
    top: 32%; left: 32%; width: 36%; height: 36%;
    background: currentColor; border-radius: 50%;
}

/* sync / refresh */
.sicon-sync::before {
    top: 12%; left: 12%; width: 76%; height: 76%;
    border: 3px solid transparent; border-top-color: currentColor;
    border-right-color: currentColor; border-radius: 50%;
}

/* clipboard / checklist */
.sicon-clipboard::before {
    top: 5%; left: 15%; width: 70%; height: 80%;
    border: 2px solid currentColor; border-radius: 4px;
}
.sicon-clipboard::after {
    top: 5%; left: 35%; width: 30%; height: 20%;
    border: 2px solid currentColor; border-radius: 4px;
}

/* clipboard-check */
.sicon-checklist::before {
    top: 5%; left: 15%; width: 70%; height: 80%;
    border: 2px solid currentColor; border-radius: 4px;
}
.sicon-checklist::after {
    top: 30%; left: 25%; width: 50%; height: 30%;
    border: 2px solid currentColor; border-top: none; border-right: none;
    transform: rotate(-45deg);
}

/* ban / prohibit */
.sicon-ban::before {
    top: 8%; left: 8%; width: 84%; height: 84%;
    border: 2px solid currentColor; border-radius: 50%;
}
.sicon-ban::after {
    top: 44%; left: 14%; width: 72%; height: 2px;
    background: currentColor; transform: rotate(-45deg);
}

/* puzzle */
.sicon-puzzle::before {
    top: 10%; left: 10%; width: 80%; height: 80%;
    border: 2px solid currentColor; border-radius: 8px;
}

/* chess knight */
.sicon-chess::before {
    top: 10%; left: 25%; width: 50%; height: 65%;
    border: 2px solid currentColor; border-radius: 50% 50% 20% 20%;
}

/* medal */
.sicon-medal::before {
    top: 8%; left: 25%; width: 50%; height: 60%;
    background: currentColor; border-radius: 50%;
}

/* brush */
.sicon-brush::before {
    top: 15%; left: 15%; width: 55%; height: 40%;
    border: 2px solid currentColor; border-radius: 2px;
    transform: rotate(-25deg);
}