Icons

SVG icons converted to CSS variable tokens with utility classes for icon display.

Examples (anchor)

The icons are designed as purely decorative CSS so the icons don't interrupt the flow of content, this enables using them in a variety of ways without additional accessibility attributes to describe or hide the icons in the content.

Heading

Download

<h4 class="ico-b info-box">Heading</h4>

<ul class="ul-none tick-box">
<li class="ico-b">Item 1</li>
<li class="ico-b">Item 2</li>
<li class="ico-b close-box">Item 3</li>
<li class="ico-b">Item 4</li>
</ul>

<a href="#" class="ico-a download">Download</a>
<button class="ico-a caret-down">Options</button>

Block

<h4 class="ico-block house">Block</h4>

Block center

<h4 class="ico-block-center house" style="text-align:center;">Block center</h4>

Home

<span class="ico house" aria-hidden="true"></span>
<a href="#" class="ico house"><span class="vis-hidden">Home</span></a>
<button class="ico bars"><span class="vis-hidden">Menu</span></button>

Customizing (anchor)

View the source code further below to see how the CSS variables in the examples are applied to the utility styles.

Heading

Home

<h3 class="ico-b house" style="--ico: Violet; --ico-xy :2.5rem; --ico-va: -.3em">Heading</h3>

<ul class="ul-none tick-box" style="--ico: LimeGreen; --ico-mr: .65rem;">
<li class="ico-b">Item 1</li>
<li class="ico-b">Item 2</li>
<li class="ico-b close-box" style="--ico: red;">Item 3</li>
<li class="ico-b">Item 4</li>
</ul>

<a href="#" class="ico-b house" style="--ico: Salmon;">Home</a>
<button class="ico-b bars" style="--ico: MediumPurple;">Menu</button>

Using the module (anchor)

To use the module load the StyleMods scss directory as follows (changing the path to suit the source files location as required) then include the Sass mixin(s) as demonstrated below.

To include all the icons and utility classes:

custom.scss 
@use "stylemods/scss" as *;
@include icons-utilities;

The different mixins can also be included individually:

custom.scss 
@use "stylemods/scss" as *;

:where(html) {
  @include custom-icons-variables;
  @include icons-variables;
  @include brand-icons-variables;
}

@include icon-utilities;
@include icon-links-buttons;
@include custom-icons-classes;
@include icons-classes;
@include brand-icons-classes;

Individual elements can be used to create custom styles or utilities:

custom.scss 
@use "stylemods/scss" as *;

.contact:before {
  --svg: #{$email};
  @include icon-mask;
}

Source code (anchor)

icons.scss 
// ---------------------------------------------------------- 
// Icons
// Create custom icons using $template, include with the
// $custom-icons map for compiling.
// ----------------------------------------------------------
// $template:   url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d=''/></svg>");

$custom-icons: ( 
//  "template": $template,
) !default;

$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>");
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>") !default;
$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>");
$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>");
$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-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-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-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-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-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-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-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>");
$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>");
$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>");

// Brands
$sassmods:              url("data:image/svg+xml,<svg viewBox='0 0 32 32' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m6 2c-4 0-4 4-4 4v20c0 4 4 4 4 4h20c4 0 4-4 4-4v-20c0-4-4-4-4-4h-20zm6.74 10.2c0.697-0.00638 1.4 0.0821 2.05 0.322v1.75c-0.749-0.487-1.7-0.698-2.58-0.521-0.423 0.0673-0.902 0.406-0.82 0.887 0.0937 0.501 0.624 0.733 1.03 0.941 0.849 0.383 1.81 0.707 2.37 1.5 0.449 0.666 0.463 1.56 0.189 2.29-0.334 0.821-1.19 1.28-2.03 1.41-1.07 0.175-2.2 0.133-3.22-0.234-0.103-0.04-0.203-0.0845-0.301-0.135v-1.88c0.842 0.716 2.05 1.05 3.13 0.734 0.387-0.103 0.711-0.494 0.594-0.906-0.152-0.505-0.686-0.742-1.12-0.955-0.779-0.341-1.64-0.634-2.18-1.33-0.545-0.704-0.592-1.74-0.188-2.52 0.461-0.863 1.46-1.24 2.38-1.34 0.23-0.0208 0.461-0.0331 0.693-0.0352zm3.56 0.141h2.77c0.602 1.76 1.22 3.52 1.81 5.28 0.112 0.283 0.12 0.668 0.238 0.902 0.262-1.17 0.717-2.27 1.09-3.4l0.961-2.78h2.7v8.4h-1.87c0.00632-1.91-0.0134-3.81 0.0117-5.72 0.012-0.37 0.0322-0.738 0.0586-1.11-0.167 0.3-0.17 0.796-0.328 1.16l-1.95 5.67h-1.55c-0.675-1.91-1.36-3.81-2.03-5.72-0.135-0.344-0.112-0.843-0.293-1.1 0.123 1.9 0.0612 3.8 0.0762 5.7v1.13h-1.71v-8.4z'/></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>") !default;
$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>");

// Maps
$icons: ( 
  "house": $house,
  "email": $email,
  "plus": $plus,
  "minus": $minus,
  "bars": $bars,
  "dots-h": $dots-h,
  "dots-v": $dots-v,
  "close": $close,
  "caret-down": $caret-down,
  "caret-up": $caret-up,
  "caret-left": $caret-left,
  "caret-right": $caret-right,
  "search": $search,
  "ext-link": $ext-link,
  "sun": $sun,
  "moon": $moon,
  "pg-link": $pg-link,
  "pen-box": $pen-box,
  "box": $box,
  "close-box": $close-box,
  "close-box-fill": $close-box-fill,
  "tick-box": $tick-box,
  "info-box": $info-box,
  "info-box-fill": $info-box-fill,
  "info-circle": $info-circle,
  "info-circle-fill": $info-circle-fill,
  "download": $download,
  "user": $user,
  "image": $image,
  "image-fill": $image-fill,
  "question-circle": $question-circle,
  "question-circle-fill": $question-circle-fill,
  "question-box": $question-box,
  "question-box-fill": $question-box-fill,  
  "circle": $circle,
  "circle-sm": $circle-sm,
  "circle-fill": $circle-fill,
  "circle-fill-sm": $circle-fill-sm,
  "circle-inner": $circle-inner,
  "circle-inner-sm": $circle-inner-sm,
  "circle-half": $circle-half,
  "circle-half-sm": $circle-half-sm,
) !default;

$brand-icons: ( 
  "sassmods": $sassmods,
  "sass": $sass,
  "rss": $rss,
  "github": $github,
  "twitter": $twitter,
  "mastodon": $mastodon,
  "tiktok": $tiktok,
  "facebook": $facebook,
  "instagram": $instagram,
  "pinterest": $pinterest,
  "codepen": $codepen,
  "reddit": $reddit,
  "youtube": $youtube,
) !default;


// Utility class mixins
@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-image: var(--svg);
  mask-repeat: no-repeat;
  opacity: var(--ico-op, 1);
}

@mixin icon-utilities {
  %icon-mask {
    @include icon-mask;
  }
  
  .ico:before {
    @extend %icon-mask;
  }
  
  .ico-b:before { 
    @extend %icon-mask;
    margin-inline-end: var(--ico-mr, calc(1em / 3.75));
  }
  
  .ico-a:after {
    @extend %icon-mask;
    margin-inline-start: var(--ico-ml, calc(1em / 3.75));
  }
  
  .ico-block:before, .ico-block-center:before {
    --ico-va: initial;
    @extend %icon-mask;
    display: block;
    margin-block-end: var(--ico-mb, 0.25rem);
  }
  
  .ico-block-center:before {
    margin-inline: auto;
  }
}

// For more control customize icon link and button colors in custom CSS
@mixin icon-links-buttons {
  :where(a) {
    --ico: var(--link, LinkText);
  }
  
  :where(a:is(:hover, :focus)) {
    --ico: var(--hover, color-mix(in srgb, LinkText 75%, white));
  }
    
  :where(button, .btn) {
    --ico: var(--btn-text, buttontext);
  }
}

// Icon CSS variables and utility class mixins
@mixin custom-icons-variables {
  @each $custom-icons, $value in $custom-icons {
    --#{$custom-icons}: #{$value};
  }   
}

@mixin custom-icons-classes {
  @each $custom-icons, $value in $custom-icons {
    .#{$custom-icons} {
      --svg: var(--#{$custom-icons});        
    }
  }
}

@mixin icons-variables {
  @each $icons, $value in $icons {
    --#{$icons}: #{$value};
  } 
}

@mixin icons-classes {
  @each $icons, $value in $icons {
    .#{$icons} {
      --svg: var(--#{$icons});        
    }
  }
}

@mixin brand-icons-variables {
  @each $brand-icons, $value in $brand-icons {
    --#{$brand-icons}: #{$value};
  } 
}

@mixin brand-icons-classes {
  @each $brand-icons, $value in $brand-icons {
    .#{$brand-icons} {
      --svg: var(--#{$brand-icons});        
    }
  }
}

@mixin icons-utilities-css {
  @include icon-utilities;
  @include icon-links-buttons;
  
  :where(html) {
    @include custom-icons-variables;
    @include icons-variables;
    @include brand-icons-variables;
  }
  
  @include custom-icons-classes;
  @include icons-classes;
  @include brand-icons-classes;
}