Icon variables
SVG icons converted to CSS variable tokens with optional variable utility classes.
Overview (anchor)
The icons are optimized 16x16px SVGs converted to Sass variables and compiled as CSS variable tokens. The optional variable utility class for each icon token is designed to work with the icon utilities if included.
Variable tokens
:where(html) {
/*! Default icons */
--house: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 15v-7l7-7 3 3v-2h2v4l2 2v7h-5v-5h-4v5z'/></svg>");
--email: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1 2 7 8 7-8h-14zm14 0.959-4.47 5.33 4.47 5.67v-11zm-14 0.041v11l4.47-5.67-4.47-5.33zm5 6-5 6h14l-5-6-2 2-2-2z'/></svg>");
--plus: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m7 2v5h-5v2h5v5h2v-5h5v-2h-5v-5h-2z'/></svg>");
--minus: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 9v-2h12v2z'/></svg>");
--bars: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 2v2h12v-2h-12zm0 5v2h12v-2h-12zm0 5v2h12v-2h-12z'/></svg>");
--dots-h: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3'/></svg>");
--dots-v: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/></svg>");
--close: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2.47 3.53 1.06-1.06 4.47 4.47 4.47-4.47 1.06 1.06-4.47 4.47 4.47 4.47-1.06 1.06-4.47-4.47-4.47 4.47-1.06-1.06 4.47-4.47z'/></svg>");
--caret-down: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 10-4-4h8z'/></svg>");
--caret-up: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 6 4 4-8 7e-7z'/></svg>");
--caret-left: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m6 8 4-4v8z'/></svg>");
--caret-right: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 8-4 4-9e-7 -8z'/></svg>");
--search: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m11.3 10.1a5.69 5.69 0 1 0-1.22 1.22h-8.75e-4q0.0385 0.0525 0.0858 0.101l3.37 3.37a0.875 0.875 0 0 0 1.24-1.24l-3.37-3.37a0.875 0.875 0 0 0-0.101-0.0875zm0.226-3.36a4.81 4.81 0 1 1-9.62 0 4.81 4.81 0 0 1 9.62 00'/></svg>");
--ext-link: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m10 0.5a0.5 0.5 0 0 0 0 1h3.79l-8.15 8.15a0.501 0.501 0 1 0 0.709 0.707l8.14-8.15v3.79a0.5 0.5 0 0 0 1 0v-5a0.5 0.5 0 0 0-0.5-0.5zm-7.5 1.5a1.5 1.5 0 0 0-1.5 1.5v10a1.5 1.5 0 0 0 1.5 1.5h10a1.5 1.5 0 0 0 1.5-1.5v-6.64a0.5 0.5 0 0 0-1 0v6.64a0.5 0.5 0 0 1-0.5 0.5h-10a0.5 0.5 0 0 1-0.5-0.5v-10a0.5 0.5 0 0 1 0.5-0.5h6.64a0.5 0.5 0 0 0 0.5-0.5 0.5 0.5 0 0 0-0.5-0.5z'/></svg>");
--sun: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m7.47 0v2.26h1.15v-2.26zm-4.9 2.19-0.812 0.8 1.62 1.6 0.812-0.8zm10.8 0-1.62 1.6 0.812 0.8 1.62-1.6zm-5.29 1.25s-4.59 0-4.59 4.52c0 4.52 4.59 4.52 4.59 4.52s4.59 0 4.59-4.52c0-4.52-4.59-4.52-4.59-4.52zm5.67 3.92v1.13h2.3v-1.13zm-13.7 0.0243v1.13h2.3v-1.13zm3.01 4-1.62 1.6 0.812 0.8 1.62-1.6zm9.99 0-0.812 0.8 1.62 1.6 0.812-0.8zm-5.54 2.36v2.26h1.15v-2.26z'/></svg>");
--moon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m5.27 1c-0.533 0.0926-0.946 0.529-1.39 0.815-1.17 0.88-1.95 2.19-2.46 3.54-0.777 2.03-0.429 4.41 0.861 6.16 1.41 1.98 3.67 3.56 6.18 3.49 1.98-0.0388 3.86-0.991 5.28-2.33 0.48-0.565 0.971-1.16 1.27-1.84 0.089-0.435-0.481-0.742-0.809-0.456-1.61 0.937-3.67 1.22-5.37 0.365-1.52-0.764-2.79-2.04-3.55-3.55-0.871-1.73-0.56-3.83 0.411-5.45 0.187-0.304-0.0437-0.726-0.4-0.734z'/></svg>");
--pg-link: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2.5 2c-1.5 0-1.5 1.5-1.5 1.5v9c0 1.5 1.5 1.5 1.5 1.5h7.25c1.5 0 1.5-1.5 1.5-1.5v-1.99s0-0.5-0.5-0.5-0.5 0.5-0.5 0.5v1.99c0 0.5-0.5 0.5-0.5 0.5h-7.25c-0.5 0-0.5-0.5-0.5-0.5v-9c0-0.5 0.5-0.5 0.5-0.5h7.25c0.5 0 0.5 0.5 0.5 0.5v2.03s0 0.5 0.5 0.5 0.5-0.5 0.5-0.5v-2.03c0-1.5-1.5-1.5-1.5-1.5zm10 2.69c-0.384 0.0235-0.699 0.509-0.336 0.859l2.04 1.96h-10c-0.681-1.89e-4 -0.681 1 0 1l10-0.00195-2.01 2c-0.48 0.471 0.241 1.18 0.721 0.707l2.88-2.85c0.198-0.196 0.2-0.513 0-0.707l-2.91-2.82c-0.121-0.117-0.257-0.16-0.385-0.152z'/></svg>");
--pen-box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13.9 0.5c-0.128 0-0.256 0.0489-0.354 0.146-2.85 2.85-5.71 5.71-8.56 8.56-0.055 0.055-0.0966 0.121-0.121 0.195l-0.805 2.41c-0.0648 0.195 0.119 0.381 0.314 0.316l2.41-0.805c0.0738-0.0242 0.142-0.0664 0.197-0.121 2.85-2.85 5.71-5.71 8.56-8.56 0.195-0.195 0.195-0.512 0-0.707l-1.29-1.29c-0.0976-0.0976-0.226-0.146-0.354-0.146zm-11.4 0.5a1.5 1.5 0 0 0-1.5 1.5v11a1.5 1.5 0 0 0 1.5 1.5h11a1.5 1.5 0 0 0 1.5-1.5v-6a0.5 0.5 0 0 0-1 0v6a0.5 0.5 0 0 1-0.5 0.5h-11a0.5 0.5 0 0 1-0.5-0.5v-11a0.5 0.5 0 0 1 0.5-0.5h6.5a0.5 0.5 0 0 0 0-1z'/></svg>");
--box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m1.51 0.0131c-0.911-0.0389-1.61 0.85-1.5 1.73 0.0031 4.3-0.0062 8.6 0.0047 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>");
--close-box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m4.82 5.53s-0.354-0.354 0-0.707 0.707 0 0.707 0l2.47 2.47 2.47-2.47s0.354-0.354 0.707 0c0.354 0.354 0 0.707 0 0.707l-2.47 2.47 2.47 2.47s0.354 0.354 0 0.707c-0.354 0.354-0.707 0-0.707 0l-2.47-2.47-2.47 2.47s-0.354 0.354-0.707 0c-0.354-0.354 0-0.707 0-0.707l2.47-2.47zm-3.31-5.51c-0.911-0.0389-1.61 0.85-1.5 1.73 0.00311 4.3-0.00623 8.6 0.00467 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>");
--close-box-fill: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 0c-2 0-2 2-2 2v12c0 2 2 2 2 2h12c2 0 2-2 2-2v-12c0-2-2-2-2-2h-12zm3.08 4.67c0.249-0.0497 0.447 0.15 0.447 0.15l2.47 2.47 2.47-2.47s0.353-0.354 0.707 0c0.354 0.354 0 0.707 0 0.707l-2.47 2.47 2.47 2.47s0.354 0.353 0 0.707c-0.354 0.354-0.707 0-0.707 0l-2.47-2.47-2.47 2.47s-0.353 0.354-0.707 0c-0.354-0.354 0-0.707 0-0.707l2.47-2.47-2.47-2.47s-0.354-0.353 0-0.707c0.0884-0.0884 0.177-0.134 0.26-0.15z'/></svg>");
--tick-box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m11.4 4.6c-0.322-0.0685-0.509 0.216-0.652 0.449l-4.01 5.57c-0.875-0.787-1.74-1.58-2.62-2.36-0.362-0.326-0.976 0.154-0.76 0.583 0.177 0.295 0.485 0.482 0.725 0.726 0.818 0.734 1.63 1.48 2.45 2.21 0.264 0.206 0.64 0.0522 0.769-0.232 1.63-2.39 2.85-3.86 4.48-6.26 0.143-0.282-0.0874-0.618-0.374-0.682zm-9.93-4.59c-0.911-0.0389-1.61 0.85-1.5 1.73 0.00311 4.3-0.00623 8.6 0.00467 12.9 0.0329 0.888 0.925 1.49 1.77 1.38 4.28-0.0031 8.57 0.0062 12.9-0.0047 0.888-0.0329 1.49-0.925 1.38-1.77-0.0031-4.28 0.0062-8.57-0.0047-12.9-0.0329-0.888-0.925-1.49-1.77-1.38h-12.7zm0 1h13c0.583-0.0209 0.508 0.598 0.5 0.998v12.5c0.0209 0.583-0.598 0.508-0.998 0.5h-12.5c-0.583 0.0209-0.508-0.598-0.5-0.998v-12.5c0.0112-0.281 0.181-0.553 0.5-0.5z'/></svg>");
--info-box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 0c-2 0-2 2-2 2v12c0 2 2 2 2 2h12c2 0 2-2 2-2v-12c0-2-2-2-2-2h-12zm0 1h12s1 0 1 1v12s0 1-1 1h-12s-1 0-1-1v-12s0-1 1-1zm6 3s-1 0-1 1 1 1 1 1 1 0 1-1-1-1-1-1zm-0.75 3v5h1.5v-5h-1.5z'/></svg>");
--info-box-fill: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 0c-2 0-2 2-2 2v12c0 2 2 2 2 2h12c2 0 2-2 2-2v-12c0-2-2-2-2-2h-12zm6 4s1 0 1 1-1 1-1 1-1 0-1-1 1-1 1-1zm-0.75 3h1.5v5h-1.5v-5z'/></svg>");
--info-circle: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0c-8 0-8 8-8 8s0 8 8 8 8-8 8-8 0-8-8-8zm0 1c7 0 7 7 7 7s0 7-7 7-7-7-7-7 0-7 7-7zm0 3s-1 0-1 1 1 1 1 1 1 0 1-1-1-1-1-1zm-0.75 3v5h1.5v-5h-1.5z'/></svg>");
--info-circle-fill: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0c-8 0-8 8-8 8s0 8 8 8 8-8 8-8 0-8-8-8zm0 4s1 0 1 1-1 1-1 1-1 0-1-1 1-1 1-1zm-0.75 3h1.5v5h-1.5v-5z'/></svg>");
--download: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 2c-0.344-0.0114-0.551 0.342-0.5 0.652 2e-3 2.21 5.6e-4 4.43 4e-3 6.64-1.06-1.06-2.13-2.13-3.2-3.19-0.0933-0.0741-0.213-0.113-0.332-0.107-0.443-0.0017-0.647 0.624-0.295 0.889 1.31 1.31 2.61 2.62 3.93 3.92 0.0104 0.0124 0.0216 0.0219 0.0332 0.0332 0.017 0.0168 0.0338 0.0339 0.0508 0.0508 0.133 0.112 0.29 0.124 0.438 0.0801 0.0874-0.02 0.167-0.0577 0.23-0.129 0.0433-0.036 0.088-0.0728 0.121-0.117 1.3-1.31 2.61-2.61 3.91-3.92 0.29-0.33-0.0448-0.898-0.475-0.801-0.313 0.0818-0.484 0.388-0.721 0.588l-2.7 2.7c-9.7e-4 -2.28 4e-3 -4.57-4e-3 -6.85-0.0246-0.245-0.25-0.446-0.496-0.441zm-6 8a0.5 0.5 0 0 0-0.5 0.5v3a0.5 0.5 0 0 0 0.5 0.5h12a0.5 0.5 0 0 0 0.5-0.5v-3a0.5 0.5 0 0 0-0.5-0.5 0.5 0.5 0 0 0-0.5 0.5v2.5h-11v-2.5a0.5 0.5 0 0 0-0.5-0.5z'/></svg>");
--user: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m7.99 3s3 0 3 3-3 3-3 3-3 0-3-3 3-3 3-3zm0.0126-3c-2.4-0.0524-4.91 0.92-6.34 2.91-1.12 1.56-1.7 3.51-1.66 5.42 0.179 2.59 1.39 5.27 3.72 6.6 2.15 1.23 4.83 1.34 7.17 0.623 2.26-0.699 3.99-2.64 4.65-4.87 0.477-1.45 0.625-3.03 0.23-4.52-0.478-2.28-1.91-4.44-4.09-5.41-1.15-0.534-2.42-0.749-3.68-0.748zm0 1c2.02-0.0441 4.19 0.661 5.42 2.34 1.05 1.41 1.61 3.2 1.57 4.96-0.0993 1.29-0.491 2.62-1.18 3.75-0.425-0.879-1.75-2.05-5.82-2.05-4.1 0-5.41 1.19-5.82 2.07-0.268-0.43-0.491-0.887-0.654-1.36-0.506-1.38-0.706-2.91-0.314-4.35 0.443-2.08 1.77-4.11 3.84-4.86 0.937-0.362 1.95-0.494 2.95-0.494z'/></svg>");
--image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 2c-2 0-2 2-2 2v8c0 2 2 2 2 2h12c2 0 2-2 2-2v-8c0-2-2-2-2-2zm0 1h12s1 0 1 1v5.17l-4-2.67-4.5 3.5-2.5-2-3 2.14v-6.14s0-1 1-1zm2 1.5c-1 0-1 1-1 1s0 1 1 1 1-1 1-1 0-1-1-1z'/></svg>");
--image-fill: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 2c-2 0-2 2-2 2v8c0 2 2 2 2 2h12c2 0 2-2 2-2v-8c0-2-2-2-2-2h-12zm2 2.5c1 0 1 1 1 1s0 1-1 1-1-1-1-1 0-1 1-1zm7 2 4 2.5v3s0 1-1 1h-12s-1 0-1-1v-2l3-2 2.5 2 4.5-3.5z'/></svg>");
--question-circle: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0c-8 0-8 8-8 8s0 8 8 8 8-8 8-8 0-8-8-8zm0 1c7 0 7 7 7 7s0 7-7 7-7-7-7-7 0-7 7-7zm-0.23 3.23c-0.236 0.0222-0.467 0.0688-0.689 0.139-0.829 0.278-1.56 1.03-1.58 1.94 0.00286 0.517 0.675 0.823 1.06 0.482 0.287-0.281 0.288-0.727 0.531-1.04 0.237-0.436 0.789-0.538 1.24-0.449 0.537 0.0854 0.95 0.691 0.732 1.21-0.225 0.482-0.713 0.754-1.07 1.13-0.412 0.356-0.727 0.859-0.727 1.42-0.0546 0.354 0.156 0.766 0.549 0.777 0.382 0.069 0.673-0.273 0.686-0.631 0.0437-0.331 0.227-0.624 0.479-0.838 0.421-0.413 0.924-0.754 1.25-1.25 0.509-0.745 0.248-1.83-0.457-2.36-0.566-0.436-1.3-0.594-2.01-0.527zm0.285 6.07c-0.454-0.0865-0.921 0.314-0.873 0.781-0.0118 0.403 0.367 0.724 0.758 0.705 0.298 0.00425 0.606-0.185 0.703-0.473 0.164-0.426-0.118-0.966-0.588-1.01z'/></svg>");
--question-circle-fill: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0c-8 0-8 8-8 8s0 8 8 8 8-8 8-8 0-8-8-8zm-0.23 4.23c0.707-0.0665 1.44 0.0911 2.01 0.527 0.705 0.526 0.966 1.61 0.457 2.36-0.326 0.5-0.829 0.841-1.25 1.25-0.252 0.214-0.435 0.507-0.479 0.838-0.013 0.358-0.303 0.7-0.686 0.631-0.392-0.011-0.603-0.424-0.549-0.777-8.55e-4 -0.559 0.314-1.06 0.727-1.42 0.357-0.373 0.845-0.645 1.07-1.13 0.217-0.522-0.195-1.13-0.732-1.21-0.451-0.0893-1 0.013-1.24 0.449-0.243 0.314-0.244 0.76-0.531 1.04-0.389 0.34-1.06 0.0343-1.06-0.482 0.0202-0.908 0.751-1.66 1.58-1.94 0.222-0.0699 0.454-0.116 0.689-0.139zm0.285 6.07c0.47 0.048 0.752 0.587 0.588 1.01-0.0975 0.288-0.405 0.477-0.703 0.473-0.391 0.0186-0.77-0.302-0.758-0.705-0.048-0.467 0.419-0.868 0.873-0.781z'/></svg>");
--question-box: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 0c-2 0-2 2-2 2v12c0 2 2 2 2 2h12c2 0 2-2 2-2v-12c0-2-2-2-2-2h-12zm0 1h12s1 0 1 1v12s0 1-1 1h-12s-1 0-1-1v-12s0-1 1-1zm5.77 3.23c-0.236 0.0222-0.467 0.0688-0.689 0.139-0.829 0.278-1.56 1.03-1.58 1.94 0.00286 0.517 0.675 0.823 1.06 0.482 0.287-0.281 0.288-0.727 0.531-1.04 0.237-0.436 0.789-0.538 1.24-0.449 0.537 0.0854 0.95 0.691 0.732 1.21-0.225 0.482-0.713 0.754-1.07 1.13-0.412 0.356-0.727 0.859-0.727 1.42-0.0546 0.354 0.156 0.766 0.549 0.777 0.382 0.069 0.673-0.273 0.686-0.631 0.0437-0.331 0.227-0.624 0.479-0.838 0.421-0.413 0.924-0.754 1.25-1.25 0.509-0.745 0.248-1.83-0.457-2.36-0.566-0.436-1.3-0.594-2.01-0.527zm0.285 6.07c-0.454-0.0865-0.921 0.314-0.873 0.781-0.0118 0.403 0.367 0.724 0.758 0.705 0.298 0.00425 0.606-0.185 0.703-0.473 0.164-0.426-0.118-0.966-0.588-1.01z'/></svg>");
--question-box-fill: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 0c-2 0-2 2-2 2v12c0 2 2 2 2 2h12c2 0 2-2 2-2v-12c0-2-2-2-2-2h-12zm5.77 4.23c0.707-0.0665 1.44 0.0911 2.01 0.527 0.705 0.526 0.966 1.61 0.457 2.36-0.326 0.5-0.829 0.841-1.25 1.25-0.252 0.214-0.435 0.507-0.479 0.838-0.013 0.358-0.303 0.7-0.686 0.631-0.392-0.011-0.603-0.424-0.549-0.777-8.55e-4 -0.559 0.314-1.06 0.727-1.42 0.357-0.373 0.845-0.645 1.07-1.13 0.217-0.522-0.195-1.13-0.732-1.21-0.451-0.0893-1 0.013-1.24 0.449-0.243 0.314-0.244 0.76-0.531 1.04-0.389 0.34-1.06 0.0343-1.06-0.482 0.0202-0.908 0.751-1.66 1.58-1.94 0.222-0.0699 0.454-0.116 0.689-0.139zm0.285 6.07c0.47 0.048 0.752 0.587 0.588 1.01-0.0975 0.288-0.405 0.477-0.703 0.473-0.391 0.0186-0.77-0.302-0.758-0.705-0.048-0.467 0.419-0.868 0.873-0.781z'/></svg>");
--circle: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0c-8 0-8 8-8 8s0 8 8 8 8-8 8-8 0-8-8-8zm0 1c7 0 7 7 7 7s0 7-7 7-7-7-7-7 0-7 7-7z'/></svg>");
--circle-sm: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 2c-6 0-6 6-6 6s0 6 6 6 6-6 6-6 0-6-6-6zm0 1c5 0 5 5 5 5s0 5-5 5-5-5-5-5 0-5 5-5z'/></svg>");
--circle-fill: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m0 8s0-8 8-8 8 8 8 8 0 8-8 8-8-8-8-8z'/></svg>");
--circle-fill-sm: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m2 8s0-6 6-6 6 6 6 6 0 6-6 6-6-6-6-6z'/></svg>");
--circle-inner: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0c-8 0-8 8-8 8s0 8 8 8 8-8 8-8 0-8-8-8zm0 1c7 0 7 7 7 7s0 7-7 7-7-7-7-7 0-7 7-7zm0 1c-6 0-6 6-6 6s0 6 6 6 6-6 6-6 0-6-6-6z'/></svg>");
--circle-inner-sm: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 2c-6 0-6 6-6 6s0 6 6 6 6-6 6-6 0-6-6-6zm0 1c5 0 5 5 5 5s0 5-5 5-5-5-5-5 0-5 5-5zm0 1c-4 0-4 4-4 4s0 4 4 4 4-4 4-4 0-4-4-4z'/></svg>");
--circle-half: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0c-8 0-8 8-8 8s0 8 8 8 8-8 8-8 0-8-8-8zm0 1s7 0 7 7-7 7-7 7v-14z'/></svg>");
--circle-half-sm: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 2s-6 0-6 6 6 6 6 6 6 0 6-6-6-6-6-6zm0 1s5 0 5 5-5 5-5 5z'/></svg>");
/*! Brand icons */
--stylemods: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m3 0c-3 0-3 3-3 3v10c0 3 3 3 3 3h10c3 0 3-3 3-3v-10c0-3-3-3-3-3h-10zm2.49 5.32c0.285 0.0257 0.567 0.083 0.836 0.182v1.08c-0.461-0.3-1.05-0.429-1.59-0.32-0.261 0.0415-0.556 0.251-0.506 0.547 0.0577 0.308 0.384 0.452 0.635 0.58 0.523 0.236 1.12 0.436 1.46 0.926 0.276 0.41 0.283 0.959 0.115 1.41-0.206 0.506-0.734 0.79-1.25 0.871-0.658 0.108-1.35 0.0817-1.98-0.145-0.0633-0.0246-0.127-0.053-0.188-0.084v-1.15c0.519 0.441 1.26 0.65 1.93 0.453 0.238-0.0635 0.438-0.305 0.365-0.559-0.0938-0.311-0.421-0.456-0.691-0.588-0.48-0.21-1.01-0.393-1.34-0.822-0.336-0.434-0.365-1.07-0.115-1.55 0.284-0.532 0.9-0.761 1.47-0.82 0.283-0.0256 0.572-0.0316 0.857-0.00586zm1.61 0.0781h1.71c0.418 1.25 0.947 2.58 1.24 3.81h0.0215c0.332-1.28 0.824-2.53 1.26-3.81h1.66v5.18h-1.15c-0.00573-1.38-0.016-2.92 0.0449-4.21h-0.0293c-0.327 1.43-0.897 2.81-1.38 4.21h-0.953c-0.464-1.35-1.12-2.94-1.4-4.21h-0.0332c0.0784 1.4 0.0469 2.77 0.0469 4.21h-1.05v-5.18z'/></svg>");
--css: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m0 0v13.4a2.56 2.56 0 0 0 2.56 2.56h10.9a2.56 2.56 0 0 0 2.56-2.56v-10.9a2.56 2.56 0 0 0-2.56-2.56zm9.53 8.72c0.436 0.0043 0.867 0.149 1.11 0.442 0.308 0.312 0.443 0.926 0.416 1.49h-1.07c0.00913-0.232-0.0128-0.607-0.103-0.744-0.0632-0.116-0.183-0.174-0.359-0.174-0.313 0-0.47 0.187-0.47 0.562 0.00335 0.398 0.158 0.561 0.52 0.727 0.468 0.182 1.06 0.492 1.28 0.868 0.643 1.14 0.202 2.89-1.38 2.83l1.6e-4 2.5e-4c-1.14 0.0157-1.65-0.795-1.62-1.89h1.11c-0.0309 0.479 0.134 0.915 0.528 0.884 0.176 0 0.3-0.055 0.371-0.165 0.136-0.201 0.161-0.783-0.033-1.01-0.136-0.217-0.624-0.408-0.883-0.537-0.368-0.176-0.634-0.386-0.796-0.628-0.366-0.538-0.332-1.72 0.181-2.2 0.257-0.305 0.728-0.459 1.19-0.455zm3.6 0c0.436 0.0043 0.867 0.149 1.11 0.442 0.308 0.312 0.443 0.926 0.416 1.49h-1.07c0.0091-0.232-0.0128-0.607-0.103-0.744-0.0632-0.116-0.183-0.174-0.359-0.174-0.313 0-0.47 0.187-0.47 0.562 0.0034 0.398 0.158 0.561 0.52 0.727 0.468 0.182 1.06 0.492 1.28 0.868 0.643 1.14 0.202 2.89-1.38 2.83l1.6e-4 2.5e-4c-1.14 0.0157-1.65-0.795-1.62-1.89h1.11c-0.0309 0.479 0.134 0.915 0.528 0.884 0.176 0 0.3-0.055 0.371-0.165 0.136-0.201 0.161-0.783-0.033-1.01-0.136-0.217-0.624-0.408-0.883-0.537-0.368-0.176-0.634-0.386-0.796-0.628-0.366-0.538-0.332-1.72 0.181-2.2 0.257-0.305 0.728-0.459 1.19-0.455zm-7.35 0.0084c0.47-0.0031 0.938 0.136 1.22 0.43 0.343 0.302 0.472 0.92 0.441 1.5h-1.18c0.0089-0.226-3e-3 -0.569-0.136-0.698-0.173-0.234-0.63-0.207-0.751 0.0371-0.0742 0.132-0.111 0.328-0.111 0.587v2.34c0 0.49 0.17 0.738 0.511 0.744 0.159 0 0.28-0.0579 0.363-0.174 0.115-0.137 0.133-0.441 0.124-0.661h1.18c0.0806 1.12-0.581 1.91-1.71 1.89h-1.6e-4c-1.03-1e-3 -1.66-0.58-1.65-1.64v-2.69c0-0.54 0.158-0.95 0.474-1.23 0.284-0.274 0.755-0.419 1.23-0.422z'/></svg>");
--sass: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m13.8 8.9c-0.558 0.00292-1.04 0.137-1.45 0.336-0.149-0.295-0.298-0.558-0.324-0.751-0.0292-0.225-0.0643-0.362-0.0292-0.631 0.0351-0.269 0.193-0.652 0.19-0.681-0.0029-0.0292-0.0351-0.167-0.357-0.17-0.321-0.00292-0.599 0.0614-0.631 0.146-0.0322 0.0848-0.0935 0.278-0.134 0.476-0.0555 0.292-0.643 1.34-0.979 1.88-0.108-0.213-0.202-0.4-0.222-0.549-0.0292-0.225-0.0643-0.362-0.0292-0.631 0.0351-0.269 0.193-0.652 0.19-0.681-0.0029-0.0292-0.0351-0.167-0.357-0.17-0.321-0.00292-0.599 0.0614-0.631 0.146-0.0322 0.0848-0.0672 0.284-0.134 0.476-0.0672 0.193-0.848 1.93-1.05 2.38-0.105 0.231-0.196 0.415-0.26 0.541 0 0-0.0029 0.0088-0.0117 0.0234-0.0555 0.108-0.0877 0.167-0.0877 0.167v0.0029c-0.0438 0.0789-0.0906 0.152-0.114 0.152-0.0175 0-0.0497-0.21 0.0058-0.497 0.117-0.605 0.395-1.55 0.392-1.58 0-0.0175 0.0526-0.181-0.181-0.266-0.228-0.0848-0.31 0.0555-0.33 0.0555-0.0205 0-0.0351 0.0497-0.0351 0.0497s0.254-1.06-0.485-1.06c-0.462 0-1.1 0.506-1.41 0.962-0.199 0.108-0.622 0.339-1.08 0.587-0.172 0.0964-0.351 0.193-0.517 0.284-0.0117-0.0117-0.0234-0.0263-0.0351-0.038-0.894-0.956-2.55-1.63-2.48-2.91 0.0263-0.468 0.187-1.7 3.18-3.19 2.46-1.21 4.42-0.877 4.76-0.132 0.485 1.06-1.05 3.04-3.59 3.33-0.97 0.108-1.48-0.266-1.61-0.406-0.134-0.146-0.155-0.155-0.205-0.126-0.0818 0.0438-0.0292 0.175 0 0.251 0.076 0.199 0.389 0.549 0.918 0.722 0.468 0.152 1.6 0.237 2.98-0.295 1.54-0.596 2.74-2.25 2.39-3.64-0.354-1.41-2.69-1.87-4.9-1.09-1.32 0.468-2.74 1.2-3.77 2.16-1.22 1.14-1.41 2.13-1.33 2.55 0.283 1.47 2.31 2.43 3.13 3.14-0.0409 0.0234-0.0789 0.0438-0.111 0.0614-0.406 0.202-1.96 1.01-2.34 1.87-0.438 0.97 0.0701 1.67 0.406 1.76 1.04 0.289 2.12-0.231 2.69-1.09 0.576-0.859 0.506-1.98 0.24-2.49-0.00292-0.0058-0.00584-0.0117-0.0117-0.0175 0.105-0.0614 0.213-0.126 0.319-0.187 0.207-0.123 0.412-0.237 0.587-0.33-0.0994 0.272-0.172 0.596-0.207 1.06-0.0438 0.549 0.181 1.26 0.476 1.54 0.132 0.123 0.286 0.126 0.386 0.126 0.345 0 0.5-0.286 0.672-0.625 0.21-0.415 0.4-0.897 0.4-0.897s-0.237 1.3 0.406 1.3c0.234 0 0.471-0.304 0.576-0.459v0.0029s0.0058-0.0088 0.0175-0.0292c0.0234-0.038 0.038-0.0614 0.038-0.0614v-0.0058c0.0935-0.164 0.304-0.535 0.617-1.15 0.403-0.795 0.792-1.79 0.792-1.79s0.0351 0.243 0.155 0.646c0.0701 0.237 0.216 0.497 0.333 0.748-0.0935 0.132-0.152 0.205-0.152 0.205l0.0029 0.0029c-0.076 0.0994-0.158 0.208-0.248 0.313-0.319 0.38-0.698 0.815-0.751 0.941-0.0614 0.149-0.0468 0.257 0.0701 0.345 0.0848 0.0643 0.237 0.0731 0.392 0.0643 0.286-0.0205 0.488-0.0906 0.587-0.134 0.155-0.0555 0.336-0.14 0.506-0.266 0.313-0.231 0.503-0.561 0.485-0.997-0.0088-0.24-0.0877-0.479-0.184-0.704 0.0292-0.0409 0.0555-0.0818 0.0848-0.123 0.494-0.722 0.877-1.51 0.877-1.51s0.0351 0.243 0.155 0.646c0.0584 0.205 0.178 0.427 0.283 0.643-0.465 0.377-0.751 0.815-0.853 1.1-0.184 0.532-0.0409 0.772 0.231 0.827 0.123 0.0263 0.298-0.0322 0.427-0.0877 0.164-0.0526 0.357-0.143 0.541-0.278 0.313-0.231 0.614-0.552 0.596-0.988-0.0088-0.199-0.0614-0.395-0.134-0.585 0.395-0.164 0.903-0.254 1.55-0.178 1.39 0.164 1.67 1.03 1.61 1.4-0.0526 0.365-0.345 0.564-0.441 0.625-0.0964 0.0614-0.129 0.0818-0.12 0.126 0.0117 0.0643 0.0584 0.0614 0.14 0.0497 0.114-0.0205 0.731-0.295 0.757-0.967 0.0439-0.859-0.774-1.8-2.22-1.79zm-10.7 3.62c-0.462 0.503-1.1 0.693-1.38 0.532-0.298-0.172-0.181-0.915 0.386-1.45 0.345-0.324 0.789-0.625 1.08-0.81 0.0672-0.0409 0.167-0.0994 0.286-0.172 0.0205-0.0117 0.0321-0.0175 0.0321-0.0175 0.0234-0.0146 0.0468-0.0292 0.0701-0.0438 0.207 0.76 0.00877 1.43-0.476 1.96zm3.36-2.29c-0.161 0.392-0.497 1.39-0.701 1.34-0.175-0.0468-0.283-0.807-0.0351-1.56 0.126-0.377 0.392-0.827 0.547-1 0.251-0.281 0.529-0.374 0.596-0.26 0.0848 0.149-0.307 1.24-0.406 1.48zm2.77 1.33c-0.0672 0.0351-0.132 0.0584-0.161 0.0409-0.0205-0.0117 0.0292-0.0584 0.0292-0.0584s0.348-0.374 0.485-0.544c0.0789-0.0994 0.172-0.216 0.272-0.348v0.038c0 0.447-0.433 0.748-0.625 0.871zm2.14-0.488c-0.0497-0.0351-0.0409-0.152 0.126-0.517 0.0643-0.143 0.216-0.383 0.476-0.614 0.0292 0.0935 0.0497 0.184 0.0468 0.269-0.0029 0.564-0.406 0.775-0.649 0.862z'/></svg>");
--rss: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1 0-2zm0 4a6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1 0-2zm.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z'/></svg>");
--github: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z'/></svg>");
--twitter: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='m12 1.67h2.15l-4.69 5.36 5.52 7.3h-4.32l-3.39-4.42-3.87 4.42h-2.15l5.02-5.73-5.29-6.92h4.43l3.06 4.04zm-0.754 11.4h1.19l-7.68-10.2h-1.28z'/></svg>");
--mastodon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z'/></svg>");
--tiktok: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M9 0h1.98c.144.715.54 1.617 1.235 2.512C12.895 3.389 13.797 4 15 4v2c-1.753 0-3.07-.814-4-1.829V11a5 5 0 1 1-5-5v2a3 3 0 1 0 3 3z'/></svg>");
--facebook: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z'/></svg>");
--instagram: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z'/></svg>");
--pinterest: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M8 0a8 8 0 0 0-2.915 15.452c-.07-.633-.134-1.606.027-2.297.146-.625.938-3.977.938-3.977s-.239-.479-.239-1.187c0-1.113.645-1.943 1.448-1.943.682 0 1.012.512 1.012 1.127 0 .686-.437 1.712-.663 2.663-.188.796.4 1.446 1.185 1.446 1.422 0 2.515-1.5 2.515-3.664 0-1.915-1.377-3.254-3.342-3.254-2.276 0-3.612 1.707-3.612 3.471 0 .688.265 1.425.595 1.826a.24.24 0 0 1 .056.23c-.061.252-.196.796-.222.907-.035.146-.116.177-.268.107-1-.465-1.624-1.926-1.624-3.1 0-2.523 1.834-4.84 5.286-4.84 2.775 0 4.932 1.977 4.932 4.62 0 2.757-1.739 4.976-4.151 4.976-.811 0-1.573-.421-1.834-.919l-.498 1.902c-.181.695-.669 1.566-.995 2.097A8 8 0 1 0 8 0z'/></svg>");
--codepen: url("data:image/svg+xml,<svg viewBox='0 0 512 512' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z'/></svg>");
--reddit: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M6.167 8a.83.83 0 0 0-.83.83c0 .459.372.84.83.831a.831.831 0 0 0 0-1.661m1.843 3.647c.315 0 1.403-.038 1.976-.611a.23.23 0 0 0 0-.306.213.213 0 0 0-.306 0c-.353.363-1.126.487-1.67.487-.545 0-1.308-.124-1.671-.487a.213.213 0 0 0-.306 0 .213.213 0 0 0 0 .306c.564.563 1.652.61 1.977.61zm.992-2.807c0 .458.373.83.831.83s.83-.381.83-.83a.831.831 0 0 0-1.66 0z'/><path d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.828-1.165c-.315 0-.602.124-.812.325-.801-.573-1.9-.945-3.121-.993l.534-2.501 1.738.372a.83.83 0 1 0 .83-.869.83.83 0 0 0-.744.468l-1.938-.41a.2.2 0 0 0-.153.028.2.2 0 0 0-.086.134l-.592 2.788c-1.24.038-2.358.41-3.17.992-.21-.2-.496-.324-.81-.324a1.163 1.163 0 0 0-.478 2.224q-.03.17-.029.353c0 1.795 2.091 3.256 4.669 3.256s4.668-1.451 4.668-3.256c0-.114-.01-.238-.029-.353.401-.181.688-.592.688-1.069 0-.65-.525-1.165-1.165-1.165'/></svg>");
--youtube: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z'/></svg>");
}Utility classes
.house {
--svg: var(--house);
}
.email {
--svg: var(--email);
}
.plus {
--svg: var(--plus);
}
.minus {
--svg: var(--minus);
}
.bars {
--svg: var(--bars);
}
.dots-h {
--svg: var(--dots-h);
}
.dots-v {
--svg: var(--dots-v);
}
.close {
--svg: var(--close);
}
.caret-down {
--svg: var(--caret-down);
}
.caret-up {
--svg: var(--caret-up);
}
.caret-left {
--svg: var(--caret-left);
}
.caret-right {
--svg: var(--caret-right);
}
.search {
--svg: var(--search);
}
.ext-link {
--svg: var(--ext-link);
}
.sun {
--svg: var(--sun);
}
.moon {
--svg: var(--moon);
}
.pg-link {
--svg: var(--pg-link);
}
.pen-box {
--svg: var(--pen-box);
}
.box {
--svg: var(--box);
}
.close-box {
--svg: var(--close-box);
}
.close-box-fill {
--svg: var(--close-box-fill);
}
.tick-box {
--svg: var(--tick-box);
}
.info-box {
--svg: var(--info-box);
}
.info-box-fill {
--svg: var(--info-box-fill);
}
.info-circle {
--svg: var(--info-circle);
}
.info-circle-fill {
--svg: var(--info-circle-fill);
}
.download {
--svg: var(--download);
}
.user {
--svg: var(--user);
}
.image {
--svg: var(--image);
}
.image-fill {
--svg: var(--image-fill);
}
.question-circle {
--svg: var(--question-circle);
}
.question-circle-fill {
--svg: var(--question-circle-fill);
}
.question-box {
--svg: var(--question-box);
}
.question-box-fill {
--svg: var(--question-box-fill);
}
.circle {
--svg: var(--circle);
}
.circle-sm {
--svg: var(--circle-sm);
}
.circle-fill {
--svg: var(--circle-fill);
}
.circle-fill-sm {
--svg: var(--circle-fill-sm);
}
.circle-inner {
--svg: var(--circle-inner);
}
.circle-inner-sm {
--svg: var(--circle-inner-sm);
}
.circle-half {
--svg: var(--circle-half);
}
.circle-half-sm {
--svg: var(--circle-half-sm);
}
.stylemods {
--svg: var(--stylemods);
}
.css {
--svg: var(--css);
}
.sass {
--svg: var(--sass);
}
.rss {
--svg: var(--rss);
}
.github {
--svg: var(--github);
}
.twitter {
--svg: var(--twitter);
}
.mastodon {
--svg: var(--mastodon);
}
.tiktok {
--svg: var(--tiktok);
}
.facebook {
--svg: var(--facebook);
}
.instagram {
--svg: var(--instagram);
}
.pinterest {
--svg: var(--pinterest);
}
.codepen {
--svg: var(--codepen);
}
.reddit {
--svg: var(--reddit);
}
.youtube {
--svg: var(--youtube);
}The Sass variables and/or CSS tokens can be used with mask-image, background-image and list-style-image property styles, and the utility classes could also be adapted for use with custom icon utility styles.
Icons (anchor)
Default icons (anchor)
house icon
--house
.house
email icon
--email
.email
user icon
--user
.user
search icon
--search
.search
--bars
.bars
dots-h icon
--dots-h
.dots-h
dots-v icon
--dots-v
.dots-v
plus icon
--plus
.plus
minus icon
--minus
.minus
close icon
--close
.close
download icon
--download
.download
ext-link icon
--ext-link
.ext-link
pg-link icon
--pg-link
.pg-link
sun icon
--sun
.sun
moon icon
--moon
.moon
image icon
--image
.image
image-fill icon
--image-fill
.image-fill
info-box icon
--info-box
.info-box
info-box-fill icon
--info-box-fill
.info-box-fill
info-circle icon
--info-circle
.info-circle
info-circle-fill icon
--info-circle-fill
.info-circle-fill
question-circle icon
--question-circle
.question-circle
question-circle-fill icon
--question-circle-fill
.question-circle-fill
question-box icon
--question-box
.question-box
question-box-fill icon
--question-box-fill
.question-box-fill
box icon
--box
.box
pen-box icon
--pen-box
.pen-box
close-box icon
--close-box
.close-box
close-box-fill icon
--close-box-fill
.close-box-fill
tick-box icon
--tick-box
.tick-box
caret-down icon
--caret-down
.caret-down
caret-up icon
--caret-up
.caret-up
caret-left icon
--caret-left
.caret-left
caret-right icon
--caret-right
.caret-right
circle icon
--circle
.circle
circle-fill icon
--circle-fill
.circle-fill
circle-inner icon
--circle-inner
.circle-inner
circle-half icon
--circle-half
.circle-half
circle-sm icon
--circle-sm
.circle-sm
circle-fill-sm icon
--circle-fill-sm
.circle-fill-sm
circle-inner-sm icon
--circle-inner-sm
.circle-inner-sm
circle-half-sm icon
--circle-half-sm
.circle-half-sm
Brand icons (anchor)
stylemods icon
--stylemods
.stylemods
css icon
--css
.css
sass icon
--sass
.sass
github icon
--github
.github
twitter icon
--twitter
.twitter
mastodon icon
--mastodon
.mastodon
tiktok icon
--tiktok
.tiktok
facebook icon
--facebook
.facebook
instagram icon
--instagram
.instagram
pinterest icon
--pinterest
.pinterest
codepen icon
--codepen
.codepen
reddit icon
--reddit
.reddit
youtube icon
--youtube
.youtube
rss icon
--rss
.rss
Icon styling (anchor)
The icons are mono SVG designed to work with mask-image property values to enable customizing color, size and other basic icon properties but could also be adapted to use with other CSS image properties if required.
The mixin below (used for the icon utilities) can be used to create custom utilities or components without compiling the default utilities, or you could also create your own similiar mixin to include with the icon tokens and/or Sass variables.
@mixin icon-mask {
display: inline-block;
content: "";
block-size: var(--ico-xy, 1em);
inline-size: var(--ico-xy, 1em);
vertical-align: var(--ico-va, -.115em);
background-color: var(--ico, CanvasText);
mask: var(--svg) no-repeat;
opacity: var(--ico-op, 1);
}The variable token for each icon is then included with the mixin in your custom style:
.home:before {
--svg: var(--house);
@include icon-mask;
}Alternatively the Sass variable for each icon (see source code below) can also be included:
.home:before {
--svg: #{$house-svg};
@include icon-mask;
}See icon utilities page customizing and utility mixin sections for more information about using the utility.
Using the module (anchor)
Load StyleMods as demonstrated (change file path as required) then include the Sass mixin anywhere below.
Grouped mixins (anchor)
You can include the default and brand icon variable tokens and the utility class for each using a single mixin:
custom.scss
@use "stylemods/scss" as *;
@include icon-variables-classes-css;Or include the grouped variables and utilities individually:
custom.scss
@use "stylemods/scss" as *;
@include icon-variables-css;
@include icon-classes-css;The variables are compiled within a :where(html) pseudo-class style (see compiled tokens above), this can be customized if required or you can also compile the variables without the style in your preferred method:
custom.scss
@use "stylemods/scss" as *;
:root {
@include icon-variables;
}
@include icon-classes-css;Individual mixins (anchor)
New in v1.3.5 You can now include the variable tokens and utility classes as individual mixins:
custom.scss
@use "stylemods/scss" as *;
:where(html) {
@include house-icon-token;
@include email-icon-token;
@include user-icon-token;
}
@include house-icon-class;
@include email-icon-class;
@include user-icon-class;Or include the Sass map in your styles with the specific icons required and use one of the grouped Sass mixins options above:
custom.scss
@use "stylemods/scss" as *;
$icon-values: (
"house": $house-svg,
"email": $email-svg,
"user": $user-svg,
"github": $github-svg,
"reddit": $reddit-svg,
);
@include icon-variables-classes-css;The custom icons utility map can also be used like the $icon-values map to compile any custom icons with the system icons.
See the using modules page for more information.
Using the framework (anchor)
Using the recommended custom setup enable the styles in an overrides document:
overrides.scss
@use "stylemods/scss/configuration" as *;
$enable-house-svg: true;
$enable-email-svg: true;
$enable-bars-svg: true;Include the overrides and the framework styles with your custom document for compiling the framework:
custom.scss
@use "overrides";
@use "stylemods/scss/stylemods";See using the framework for more information.
Source code (anchor)
The Icon variables source file is included with the icons module files, you can view the source code from the latest release (v1.5.0) via the Github link below.
- Source document
- stylemods/scss/icons/icon-variables.scss
- View on Github
- https://github.com/pmbrown/StyleMods/blob/main/scss/icons/icon-variables.scss
Shared documentation about how to customize the default property values for the styles using the Sass and CSS variables is provided on the customizing page.