Icons

Utility styles for icons commonly used in web design converted from SVG files to CSS variable tokens.

Examples

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 question">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

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

Add the sassmods.scss to your custom styles as below then include the Sass mixin(s) as demonstrated below.

To include all the icons and utility classes:

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

The different mixins can also be included individually:

custom.scss 
@use "sassmods/scss/sassmods" 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 "sassmods/scss/sassmods" as *;

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

Source

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

$custom-icons: ( 
  "sassmods": $sassmods,
) !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;
$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;
$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;
$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;
$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>");
$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;
$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;
$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;
$question:          url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='currentColor' xmlns='http://www.w3.org/2000/svg'><path d='m8 0.00201c-2.64-0.0763-5.41 1.16-6.73 3.52-1.29 2.15-1.64 4.86-0.791 7.23 0.67 2.12 2.26 4 4.4 4.72 2.23 0.8 4.78 0.696 6.94-0.278 2.18-1.05 3.6-3.28 4.02-5.62 0.483-2.35-0.164-4.88-1.6-6.79-1.44-1.94-3.88-2.82-6.23-2.78zm0 0.999c2.18-0.065 4.54 0.811 5.71 2.75 1.24 1.91 1.65 4.37 0.912 6.54-0.57 1.95-2 3.75-4.01 4.32-1.9 0.596-4.02 0.51-5.86-0.229-1.99-0.887-3.22-2.93-3.6-5.01-0.424-2.05 0.15-4.26 1.37-5.95 1.02-1.44 2.73-2.23 4.45-2.38 0.343-0.0353 0.688-0.051 1.03-0.0511zm-2.69 5.18c0.053-1.45 1.6-2.37 2.94-2.24 1.22-0.0093 2.53 0.941 2.43 2.25-0.0616 1.18-1.28 1.71-1.93 2.54-0.113 0.679-0.679 1.79-1.43 0.96-0.346-0.832 0.191-1.72 0.842-2.23 0.469-0.438 1.24-0.918 1-1.67-0.311-0.943-1.86-0.97-2.23-0.0498-0.0253 0.867-1.22 1.66-1.61 0.566zm2.62 5.89c-1.4 0.0355-0.715-2.25 0.447-1.48 0.652 0.405 0.34 1.52-0.447 1.48z'/></svg>") !default;

// Brands
$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>");

// 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,
  "download": $download,
  "user": $user,
  "question": $question,
) !default;

$brand-icons: ( 
  "rss": $rss,
  "github": $github,
  "twitter": $twitter,
  "mastodon": $mastodon,
  "tiktok": $tiktok,
  "facebook": $facebook,
  "instagram": $instagram,
  "pinterest": $pinterest,
  "codepen": $codepen,
  "reddit": $reddit,
) !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;
}

@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(--ico-link, LinkText);
  }
  
  :where(button) {
    --ico: var(--ico-btn, 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 {
  @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;
}