SVG icons

SVG icons converted to CSS variable tokens with optional variable utility classes.

Examples (anchor)

As designed the examples use the icon utilities to display the icons using mask-image properties, but if required the SVG tokens can be used with other CSS image property styles like background-image and list-style-image.

Default icons (anchor)

house icon

--house
.house

--email
.email

bars icon

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

--search
.search

download icon

--download
.download

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

--ext-link
.ext-link

--pg-link
.pg-link

sun icon

--sun
.sun

moon icon

--moon
.moon

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

user icon

--user
.user

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

image icon

--image
.image

image-fill icon

--image-fill
.image-fill

Brand icons (anchor)

stylemods icon

--stylemods
.stylemods

sass icon

--sass
.sass

github icon

--github
.github

--twitter
.twitter

mastodon icon

--mastodon
.mastodon

tiktok icon

--tiktok
.tiktok

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

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.

Grouped icons (anchor)

All the icon variables included in a customizable (see below) :where(html) pseudo-class wrapper style and their utility classes as shown above:

custom.scss
@use "stylemods/scss" as *;
@include all-svg-icons-css;

The grouped variables and classes can also be included individually. The variables can be included by themselves for use in CSS but the classes are dependent on the variables for values.

custom.scss
@use "stylemods/scss" as *;
@include all-svg-icon-variables-css;
@include all-svg-icon-classes-css;

The variable tokens and the class utilities for the default and brand icon sets can be included individually.

custom.scss
@use "stylemods/scss" as *;
@include default-svg-icon-variables-css;
@include brand-svg-icon-variables-css;
@include default-svg-icon-classes-css;
@include brand-svg-icon-classes-css;

Individual icons (anchor)

For individual icons you can use the icons Sass maps and include only the specific icons required:

custom.scss
@use "stylemods/scss" as *;
$default-icon-values: ( 
  "house": $house,
  "email": $email,
  "user": $user,
);
$brand-icon-values: ( 
  "github": $github,
  "reddit": $reddit,
);
@include all-icons-css;

As with the Sass variables you can move the Sass maps to an external document if preferred.

Customize the pseudo-class (anchor)

The :where(html) pseudo-class can be customized to use :root or another selector if preferred:

custom.scss
@use 'stylemods/scss' with (
  $svg-icon-tokens: root,
);
@use "stylemods/scss" as *;
@include all-icons-css;

The variables themselves can also be included as variable tokens only so you can include them in your preferred wrapper style with any other CSS variable tokens included with your styles.

custom.scss
@use "stylemods/scss" as *;
:where(html) {
  @include default-svg-icon-variables;
  @include brand-svg-icon-variables;
}

Source code (anchor)

svg-icons.scss
// ---------------------------------------------------------- 
// Icons
// ----------------------------------------------------------
// Variables
$icon-tokens:           where(html) !default;

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

// 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>");
$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
$default-icon-values: ( 
  "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-icon-values: ( 
  "stylemods": $stylemods,
  "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;

// Default icons
@mixin default-svg-icon-variables {
  @each $name, $value in $default-icon-values {
    --#{$name}: #{$value};
  } 
}

@mixin default-svg-icon-variables-css {
  :#{$icon-tokens} {
    @include default-svg-icon-variables;
  }
}

@mixin default-svg-icon-classes-css {
  @each $name, $value in $default-icon-values {
    .#{$name} {
      --svg: var(--#{$name});        
    }
  }
}

// Brand icons
@mixin brand-svg-icon-variables {
  @each $name, $value in $brand-icon-values {
    --#{$name}: #{$value};
  } 
}

@mixin brand-svg-icon-variables-css {
  :#{$icon-tokens} {
    @include brand-svg-icon-variables;
  }
}

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

// Grouped mixins
@mixin all-svg-icon-variables-css {
  :#{$icon-tokens} {
    @include default-svg-icon-variables;
    @include brand-svg-icon-variables;
  }
}

@mixin all-svg-icon-classes-css {
  @include default-svg-icon-classes-css;
  @include brand-svg-icon-classes-css;
}

@mixin all-svg-icons-css {
  @include all-svg-icon-variables-css;
  @include all-svg-icon-classes-css;
}