PSI Software SE Design Library

Icon

Component: Icon

Implementation Notes

During the build process, all SVG files from the source directory (./src) are combined into a single SVG file. This file can be embedded in the HTML document and the desired icon can be selected via its ID:

<svg><use href="/images/icon/icons.svg#icon--name-of-icon"/></svg>

The ID consists of the prefix icon-- and the filename of the SVG source file (without the file suffix .svg).

Notes on Loading Icons from Second Domain

When the icons are not located on the same (sub-)domain, they will not be displayed because the files cannot be loaded (Unsafe attempt to load URL X from frame with URL Y. Domains, protocols and ports must match). To fix this issue, the polyfill “svgxuse.js” can be used (see GitHub - Keyamoon/svgxuse).

Note on Support for Older Browsers

Older browsers only support the method of embedding SVG icons via the use attribute in an outdated notation (see also MDN). Therefore, if older browsers need to be supported (see Can I use…), the following notation must be used for embedding:

<svg><use href="/images/icon/icons.svg#icon--name-of-icon" xlink:href="/images/icon/icons.svg#icon--name-of-icon"/></svg>

Note on Internet Explorer Support

Internet Explorer before version 11 only displays the icons when the SVG code is directly integrated into the HTML markup. The SVG code can be automatically loaded when needed using the polyfill “svgxuse.js” (see GitHub - Keyamoon/svgxuse).

Icon Set

The boilerplate uses icons from the Phosphor Icon Set. The icons are available as components and as a plugin for Figma.

The unconverted SVGs of the set, which are needed for conversion and compilation in various thicknesses, can be downloaded from GitHub.

Caution: The SVG markup must have a defined stroke width (e.g., stroke-width="1"), otherwise the other stroke widths will not be generated.

<!-- Default -->
<svg class="icon is-">
    <use href="../../icons/icons.svg#icon--" xlink:href="../../icons/icons.svg#icon--"></use>
</svg>


<!-- Arrow Left -->
<svg class="icon is-arrow-left">
    <use href="../../icons/icons.svg#icon--arrow-left" xlink:href="../../icons/icons.svg#icon--arrow-left"></use>
</svg>


<!-- Arrow Line Down -->
<svg class="icon is-arrow-line-down">
    <use href="../../icons/icons.svg#icon--arrow-line-down" xlink:href="../../icons/icons.svg#icon--arrow-line-down"></use>
</svg>


<!-- Arrow Return -->
<svg class="icon is-arrow-return">
    <use href="../../icons/icons.svg#icon--arrow-return" xlink:href="../../icons/icons.svg#icon--arrow-return"></use>
</svg>


<!-- Arrow Right -->
<svg class="icon is-arrow-right">
    <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
</svg>


<!-- Arrow Square Out -->
<svg class="icon is-arrow-square-out">
    <use href="../../icons/icons.svg#icon--arrow-square-out" xlink:href="../../icons/icons.svg#icon--arrow-square-out"></use>
</svg>


<!-- Arrow Top -->
<svg class="icon is-arrow-top">
    <use href="../../icons/icons.svg#icon--arrow-top" xlink:href="../../icons/icons.svg#icon--arrow-top"></use>
</svg>


<!-- Arrows Out -->
<svg class="icon is-arrows-out">
    <use href="../../icons/icons.svg#icon--arrows-out" xlink:href="../../icons/icons.svg#icon--arrows-out"></use>
</svg>


<!-- Calendar Plus -->
<svg class="icon is-calendar-plus">
    <use href="../../icons/icons.svg#icon--calendar-plus" xlink:href="../../icons/icons.svg#icon--calendar-plus"></use>
</svg>


<!-- Cloud Arrow Up -->
<svg class="icon is-cloud-arrow-up">
    <use href="../../icons/icons.svg#icon--cloud-arrow-up" xlink:href="../../icons/icons.svg#icon--cloud-arrow-up"></use>
</svg>


<!-- Confetti -->
<svg class="icon is-confetti">
    <use href="../../icons/icons.svg#icon--confetti" xlink:href="../../icons/icons.svg#icon--confetti"></use>
</svg>


<!-- Download Simple -->
<svg class="icon is-download-simple">
    <use href="../../icons/icons.svg#icon--download-simple" xlink:href="../../icons/icons.svg#icon--download-simple"></use>
</svg>


<!-- Envelope -->
<svg class="icon is-envelope">
    <use href="../../icons/icons.svg#icon--envelope" xlink:href="../../icons/icons.svg#icon--envelope"></use>
</svg>


<!-- Eye Slash -->
<svg class="icon is-eye-slash">
    <use href="../../icons/icons.svg#icon--eye-slash" xlink:href="../../icons/icons.svg#icon--eye-slash"></use>
</svg>


<!-- Eye -->
<svg class="icon is-eye">
    <use href="../../icons/icons.svg#icon--eye" xlink:href="../../icons/icons.svg#icon--eye"></use>
</svg>


<!-- Faders Horizontal -->
<svg class="icon is-faders-horizontal">
    <use href="../../icons/icons.svg#icon--faders-horizontal" xlink:href="../../icons/icons.svg#icon--faders-horizontal"></use>
</svg>


<!-- Hands Clapping -->
<svg class="icon is-hands-clapping">
    <use href="../../icons/icons.svg#icon--hands-clapping" xlink:href="../../icons/icons.svg#icon--hands-clapping"></use>
</svg>


<!-- House -->
<svg class="icon is-house">
    <use href="../../icons/icons.svg#icon--house" xlink:href="../../icons/icons.svg#icon--house"></use>
</svg>


<!-- Linkedin Logo -->
<svg class="icon is-linkedin-logo">
    <use href="../../icons/icons.svg#icon--linkedin-logo" xlink:href="../../icons/icons.svg#icon--linkedin-logo"></use>
</svg>


<!-- Magnifying Glass -->
<svg class="icon is-magnifying-glass">
    <use href="../../icons/icons.svg#icon--magnifying-glass" xlink:href="../../icons/icons.svg#icon--magnifying-glass"></use>
</svg>


<!-- Plus -->
<svg class="icon is-plus">
    <use href="../../icons/icons.svg#icon--plus" xlink:href="../../icons/icons.svg#icon--plus"></use>
</svg>


<!-- Share Fat -->
<svg class="icon is-share-fat">
    <use href="../../icons/icons.svg#icon--share-fat" xlink:href="../../icons/icons.svg#icon--share-fat"></use>
</svg>


<!-- Upload Simple -->
<svg class="icon is-upload-simple">
    <use href="../../icons/icons.svg#icon--upload-simple" xlink:href="../../icons/icons.svg#icon--upload-simple"></use>
</svg>


<!-- X -->
<svg class="icon is-x">
    <use href="../../icons/icons.svg#icon--x" xlink:href="../../icons/icons.svg#icon--x"></use>
</svg>


<!-- Youtube Logo -->
<svg class="icon is-youtube-logo">
    <use href="../../icons/icons.svg#icon--youtube-logo" xlink:href="../../icons/icons.svg#icon--youtube-logo"></use>
</svg>


<!-- Doc Only -->
<div class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Thin</h2>

        <div class="doc-variant-configuration">

            <ul data-label="Weight">
                <li>thin</li>
            </ul>

        </div>

    </header>

    <div class="doc-icons" style="margin-top: var(--sp);">
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-left">

            <span class="doc-tooltip">
                ID: <strong>arrow-left</strong>
            </span>

            <svg class="icon is-arrow-left">
                <use href="../../icons/icons-thin.svg#icon--arrow-left" xlink:href="../../icons/icons-thin.svg#icon--arrow-left"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-line-down">

            <span class="doc-tooltip">
                ID: <strong>arrow-line-down</strong>
            </span>

            <svg class="icon is-arrow-line-down">
                <use href="../../icons/icons-thin.svg#icon--arrow-line-down" xlink:href="../../icons/icons-thin.svg#icon--arrow-line-down"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-return">

            <span class="doc-tooltip">
                ID: <strong>arrow-return</strong>
            </span>

            <svg class="icon is-arrow-return">
                <use href="../../icons/icons-thin.svg#icon--arrow-return" xlink:href="../../icons/icons-thin.svg#icon--arrow-return"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-right">

            <span class="doc-tooltip">
                ID: <strong>arrow-right</strong>
            </span>

            <svg class="icon is-arrow-right">
                <use href="../../icons/icons-thin.svg#icon--arrow-right" xlink:href="../../icons/icons-thin.svg#icon--arrow-right"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-square-out">

            <span class="doc-tooltip">
                ID: <strong>arrow-square-out</strong>
            </span>

            <svg class="icon is-arrow-square-out">
                <use href="../../icons/icons-thin.svg#icon--arrow-square-out" xlink:href="../../icons/icons-thin.svg#icon--arrow-square-out"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-top">

            <span class="doc-tooltip">
                ID: <strong>arrow-top</strong>
            </span>

            <svg class="icon is-arrow-top">
                <use href="../../icons/icons-thin.svg#icon--arrow-top" xlink:href="../../icons/icons-thin.svg#icon--arrow-top"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrows-out">

            <span class="doc-tooltip">
                ID: <strong>arrows-out</strong>
            </span>

            <svg class="icon is-arrows-out">
                <use href="../../icons/icons-thin.svg#icon--arrows-out" xlink:href="../../icons/icons-thin.svg#icon--arrows-out"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="calendar-plus">

            <span class="doc-tooltip">
                ID: <strong>calendar-plus</strong>
            </span>

            <svg class="icon is-calendar-plus">
                <use href="../../icons/icons-thin.svg#icon--calendar-plus" xlink:href="../../icons/icons-thin.svg#icon--calendar-plus"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="cloud-arrow-up">

            <span class="doc-tooltip">
                ID: <strong>cloud-arrow-up</strong>
            </span>

            <svg class="icon is-cloud-arrow-up">
                <use href="../../icons/icons-thin.svg#icon--cloud-arrow-up" xlink:href="../../icons/icons-thin.svg#icon--cloud-arrow-up"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="confetti">

            <span class="doc-tooltip">
                ID: <strong>confetti</strong>
            </span>

            <svg class="icon is-confetti">
                <use href="../../icons/icons-thin.svg#icon--confetti" xlink:href="../../icons/icons-thin.svg#icon--confetti"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="download-simple">

            <span class="doc-tooltip">
                ID: <strong>download-simple</strong>
            </span>

            <svg class="icon is-download-simple">
                <use href="../../icons/icons-thin.svg#icon--download-simple" xlink:href="../../icons/icons-thin.svg#icon--download-simple"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="envelope">

            <span class="doc-tooltip">
                ID: <strong>envelope</strong>
            </span>

            <svg class="icon is-envelope">
                <use href="../../icons/icons-thin.svg#icon--envelope" xlink:href="../../icons/icons-thin.svg#icon--envelope"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="eye-slash">

            <span class="doc-tooltip">
                ID: <strong>eye-slash</strong>
            </span>

            <svg class="icon is-eye-slash">
                <use href="../../icons/icons-thin.svg#icon--eye-slash" xlink:href="../../icons/icons-thin.svg#icon--eye-slash"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="eye">

            <span class="doc-tooltip">
                ID: <strong>eye</strong>
            </span>

            <svg class="icon is-eye">
                <use href="../../icons/icons-thin.svg#icon--eye" xlink:href="../../icons/icons-thin.svg#icon--eye"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="faders-horizontal">

            <span class="doc-tooltip">
                ID: <strong>faders-horizontal</strong>
            </span>

            <svg class="icon is-faders-horizontal">
                <use href="../../icons/icons-thin.svg#icon--faders-horizontal" xlink:href="../../icons/icons-thin.svg#icon--faders-horizontal"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="hands-clapping">

            <span class="doc-tooltip">
                ID: <strong>hands-clapping</strong>
            </span>

            <svg class="icon is-hands-clapping">
                <use href="../../icons/icons-thin.svg#icon--hands-clapping" xlink:href="../../icons/icons-thin.svg#icon--hands-clapping"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="house">

            <span class="doc-tooltip">
                ID: <strong>house</strong>
            </span>

            <svg class="icon is-house">
                <use href="../../icons/icons-thin.svg#icon--house" xlink:href="../../icons/icons-thin.svg#icon--house"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="linkedin-logo">

            <span class="doc-tooltip">
                ID: <strong>linkedin-logo</strong>
            </span>

            <svg class="icon is-linkedin-logo">
                <use href="../../icons/icons-thin.svg#icon--linkedin-logo" xlink:href="../../icons/icons-thin.svg#icon--linkedin-logo"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="magnifying-glass">

            <span class="doc-tooltip">
                ID: <strong>magnifying-glass</strong>
            </span>

            <svg class="icon is-magnifying-glass">
                <use href="../../icons/icons-thin.svg#icon--magnifying-glass" xlink:href="../../icons/icons-thin.svg#icon--magnifying-glass"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="plus">

            <span class="doc-tooltip">
                ID: <strong>plus</strong>
            </span>

            <svg class="icon is-plus">
                <use href="../../icons/icons-thin.svg#icon--plus" xlink:href="../../icons/icons-thin.svg#icon--plus"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="share-fat">

            <span class="doc-tooltip">
                ID: <strong>share-fat</strong>
            </span>

            <svg class="icon is-share-fat">
                <use href="../../icons/icons-thin.svg#icon--share-fat" xlink:href="../../icons/icons-thin.svg#icon--share-fat"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="upload-simple">

            <span class="doc-tooltip">
                ID: <strong>upload-simple</strong>
            </span>

            <svg class="icon is-upload-simple">
                <use href="../../icons/icons-thin.svg#icon--upload-simple" xlink:href="../../icons/icons-thin.svg#icon--upload-simple"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="x">

            <span class="doc-tooltip">
                ID: <strong>x</strong>
            </span>

            <svg class="icon is-x">
                <use href="../../icons/icons-thin.svg#icon--x" xlink:href="../../icons/icons-thin.svg#icon--x"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="youtube-logo">

            <span class="doc-tooltip">
                ID: <strong>youtube-logo</strong>
            </span>

            <svg class="icon is-youtube-logo">
                <use href="../../icons/icons-thin.svg#icon--youtube-logo" xlink:href="../../icons/icons-thin.svg#icon--youtube-logo"></use>
            </svg>

        </span>
    </div>

</div>
<div class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Light</h2>

        <div class="doc-variant-configuration">

            <ul data-label="Weight">
                <li>light</li>
            </ul>

        </div>

    </header>

    <div class="doc-icons" style="margin-top: var(--sp);">
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-left">

            <span class="doc-tooltip">
                ID: <strong>arrow-left</strong>
            </span>

            <svg class="icon is-arrow-left">
                <use href="../../icons/icons-light.svg#icon--arrow-left" xlink:href="../../icons/icons-light.svg#icon--arrow-left"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-line-down">

            <span class="doc-tooltip">
                ID: <strong>arrow-line-down</strong>
            </span>

            <svg class="icon is-arrow-line-down">
                <use href="../../icons/icons-light.svg#icon--arrow-line-down" xlink:href="../../icons/icons-light.svg#icon--arrow-line-down"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-return">

            <span class="doc-tooltip">
                ID: <strong>arrow-return</strong>
            </span>

            <svg class="icon is-arrow-return">
                <use href="../../icons/icons-light.svg#icon--arrow-return" xlink:href="../../icons/icons-light.svg#icon--arrow-return"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-right">

            <span class="doc-tooltip">
                ID: <strong>arrow-right</strong>
            </span>

            <svg class="icon is-arrow-right">
                <use href="../../icons/icons-light.svg#icon--arrow-right" xlink:href="../../icons/icons-light.svg#icon--arrow-right"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-square-out">

            <span class="doc-tooltip">
                ID: <strong>arrow-square-out</strong>
            </span>

            <svg class="icon is-arrow-square-out">
                <use href="../../icons/icons-light.svg#icon--arrow-square-out" xlink:href="../../icons/icons-light.svg#icon--arrow-square-out"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-top">

            <span class="doc-tooltip">
                ID: <strong>arrow-top</strong>
            </span>

            <svg class="icon is-arrow-top">
                <use href="../../icons/icons-light.svg#icon--arrow-top" xlink:href="../../icons/icons-light.svg#icon--arrow-top"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrows-out">

            <span class="doc-tooltip">
                ID: <strong>arrows-out</strong>
            </span>

            <svg class="icon is-arrows-out">
                <use href="../../icons/icons-light.svg#icon--arrows-out" xlink:href="../../icons/icons-light.svg#icon--arrows-out"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="calendar-plus">

            <span class="doc-tooltip">
                ID: <strong>calendar-plus</strong>
            </span>

            <svg class="icon is-calendar-plus">
                <use href="../../icons/icons-light.svg#icon--calendar-plus" xlink:href="../../icons/icons-light.svg#icon--calendar-plus"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="cloud-arrow-up">

            <span class="doc-tooltip">
                ID: <strong>cloud-arrow-up</strong>
            </span>

            <svg class="icon is-cloud-arrow-up">
                <use href="../../icons/icons-light.svg#icon--cloud-arrow-up" xlink:href="../../icons/icons-light.svg#icon--cloud-arrow-up"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="confetti">

            <span class="doc-tooltip">
                ID: <strong>confetti</strong>
            </span>

            <svg class="icon is-confetti">
                <use href="../../icons/icons-light.svg#icon--confetti" xlink:href="../../icons/icons-light.svg#icon--confetti"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="download-simple">

            <span class="doc-tooltip">
                ID: <strong>download-simple</strong>
            </span>

            <svg class="icon is-download-simple">
                <use href="../../icons/icons-light.svg#icon--download-simple" xlink:href="../../icons/icons-light.svg#icon--download-simple"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="envelope">

            <span class="doc-tooltip">
                ID: <strong>envelope</strong>
            </span>

            <svg class="icon is-envelope">
                <use href="../../icons/icons-light.svg#icon--envelope" xlink:href="../../icons/icons-light.svg#icon--envelope"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="eye-slash">

            <span class="doc-tooltip">
                ID: <strong>eye-slash</strong>
            </span>

            <svg class="icon is-eye-slash">
                <use href="../../icons/icons-light.svg#icon--eye-slash" xlink:href="../../icons/icons-light.svg#icon--eye-slash"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="eye">

            <span class="doc-tooltip">
                ID: <strong>eye</strong>
            </span>

            <svg class="icon is-eye">
                <use href="../../icons/icons-light.svg#icon--eye" xlink:href="../../icons/icons-light.svg#icon--eye"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="faders-horizontal">

            <span class="doc-tooltip">
                ID: <strong>faders-horizontal</strong>
            </span>

            <svg class="icon is-faders-horizontal">
                <use href="../../icons/icons-light.svg#icon--faders-horizontal" xlink:href="../../icons/icons-light.svg#icon--faders-horizontal"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="hands-clapping">

            <span class="doc-tooltip">
                ID: <strong>hands-clapping</strong>
            </span>

            <svg class="icon is-hands-clapping">
                <use href="../../icons/icons-light.svg#icon--hands-clapping" xlink:href="../../icons/icons-light.svg#icon--hands-clapping"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="house">

            <span class="doc-tooltip">
                ID: <strong>house</strong>
            </span>

            <svg class="icon is-house">
                <use href="../../icons/icons-light.svg#icon--house" xlink:href="../../icons/icons-light.svg#icon--house"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="linkedin-logo">

            <span class="doc-tooltip">
                ID: <strong>linkedin-logo</strong>
            </span>

            <svg class="icon is-linkedin-logo">
                <use href="../../icons/icons-light.svg#icon--linkedin-logo" xlink:href="../../icons/icons-light.svg#icon--linkedin-logo"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="magnifying-glass">

            <span class="doc-tooltip">
                ID: <strong>magnifying-glass</strong>
            </span>

            <svg class="icon is-magnifying-glass">
                <use href="../../icons/icons-light.svg#icon--magnifying-glass" xlink:href="../../icons/icons-light.svg#icon--magnifying-glass"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="plus">

            <span class="doc-tooltip">
                ID: <strong>plus</strong>
            </span>

            <svg class="icon is-plus">
                <use href="../../icons/icons-light.svg#icon--plus" xlink:href="../../icons/icons-light.svg#icon--plus"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="share-fat">

            <span class="doc-tooltip">
                ID: <strong>share-fat</strong>
            </span>

            <svg class="icon is-share-fat">
                <use href="../../icons/icons-light.svg#icon--share-fat" xlink:href="../../icons/icons-light.svg#icon--share-fat"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="upload-simple">

            <span class="doc-tooltip">
                ID: <strong>upload-simple</strong>
            </span>

            <svg class="icon is-upload-simple">
                <use href="../../icons/icons-light.svg#icon--upload-simple" xlink:href="../../icons/icons-light.svg#icon--upload-simple"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="x">

            <span class="doc-tooltip">
                ID: <strong>x</strong>
            </span>

            <svg class="icon is-x">
                <use href="../../icons/icons-light.svg#icon--x" xlink:href="../../icons/icons-light.svg#icon--x"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="youtube-logo">

            <span class="doc-tooltip">
                ID: <strong>youtube-logo</strong>
            </span>

            <svg class="icon is-youtube-logo">
                <use href="../../icons/icons-light.svg#icon--youtube-logo" xlink:href="../../icons/icons-light.svg#icon--youtube-logo"></use>
            </svg>

        </span>
    </div>

</div>
<div class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Medium (Default)</h2>

    </header>

    <div class="doc-icons" style="margin-top: var(--sp);">
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-left">

            <span class="doc-tooltip">
                ID: <strong>arrow-left</strong>
            </span>

            <svg class="icon is-arrow-left">
                <use href="../../icons/icons.svg#icon--arrow-left" xlink:href="../../icons/icons.svg#icon--arrow-left"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-line-down">

            <span class="doc-tooltip">
                ID: <strong>arrow-line-down</strong>
            </span>

            <svg class="icon is-arrow-line-down">
                <use href="../../icons/icons.svg#icon--arrow-line-down" xlink:href="../../icons/icons.svg#icon--arrow-line-down"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-return">

            <span class="doc-tooltip">
                ID: <strong>arrow-return</strong>
            </span>

            <svg class="icon is-arrow-return">
                <use href="../../icons/icons.svg#icon--arrow-return" xlink:href="../../icons/icons.svg#icon--arrow-return"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-right">

            <span class="doc-tooltip">
                ID: <strong>arrow-right</strong>
            </span>

            <svg class="icon is-arrow-right">
                <use href="../../icons/icons.svg#icon--arrow-right" xlink:href="../../icons/icons.svg#icon--arrow-right"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-square-out">

            <span class="doc-tooltip">
                ID: <strong>arrow-square-out</strong>
            </span>

            <svg class="icon is-arrow-square-out">
                <use href="../../icons/icons.svg#icon--arrow-square-out" xlink:href="../../icons/icons.svg#icon--arrow-square-out"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-top">

            <span class="doc-tooltip">
                ID: <strong>arrow-top</strong>
            </span>

            <svg class="icon is-arrow-top">
                <use href="../../icons/icons.svg#icon--arrow-top" xlink:href="../../icons/icons.svg#icon--arrow-top"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrows-out">

            <span class="doc-tooltip">
                ID: <strong>arrows-out</strong>
            </span>

            <svg class="icon is-arrows-out">
                <use href="../../icons/icons.svg#icon--arrows-out" xlink:href="../../icons/icons.svg#icon--arrows-out"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="calendar-plus">

            <span class="doc-tooltip">
                ID: <strong>calendar-plus</strong>
            </span>

            <svg class="icon is-calendar-plus">
                <use href="../../icons/icons.svg#icon--calendar-plus" xlink:href="../../icons/icons.svg#icon--calendar-plus"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="cloud-arrow-up">

            <span class="doc-tooltip">
                ID: <strong>cloud-arrow-up</strong>
            </span>

            <svg class="icon is-cloud-arrow-up">
                <use href="../../icons/icons.svg#icon--cloud-arrow-up" xlink:href="../../icons/icons.svg#icon--cloud-arrow-up"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="confetti">

            <span class="doc-tooltip">
                ID: <strong>confetti</strong>
            </span>

            <svg class="icon is-confetti">
                <use href="../../icons/icons.svg#icon--confetti" xlink:href="../../icons/icons.svg#icon--confetti"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="download-simple">

            <span class="doc-tooltip">
                ID: <strong>download-simple</strong>
            </span>

            <svg class="icon is-download-simple">
                <use href="../../icons/icons.svg#icon--download-simple" xlink:href="../../icons/icons.svg#icon--download-simple"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="envelope">

            <span class="doc-tooltip">
                ID: <strong>envelope</strong>
            </span>

            <svg class="icon is-envelope">
                <use href="../../icons/icons.svg#icon--envelope" xlink:href="../../icons/icons.svg#icon--envelope"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="eye-slash">

            <span class="doc-tooltip">
                ID: <strong>eye-slash</strong>
            </span>

            <svg class="icon is-eye-slash">
                <use href="../../icons/icons.svg#icon--eye-slash" xlink:href="../../icons/icons.svg#icon--eye-slash"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="eye">

            <span class="doc-tooltip">
                ID: <strong>eye</strong>
            </span>

            <svg class="icon is-eye">
                <use href="../../icons/icons.svg#icon--eye" xlink:href="../../icons/icons.svg#icon--eye"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="faders-horizontal">

            <span class="doc-tooltip">
                ID: <strong>faders-horizontal</strong>
            </span>

            <svg class="icon is-faders-horizontal">
                <use href="../../icons/icons.svg#icon--faders-horizontal" xlink:href="../../icons/icons.svg#icon--faders-horizontal"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="hands-clapping">

            <span class="doc-tooltip">
                ID: <strong>hands-clapping</strong>
            </span>

            <svg class="icon is-hands-clapping">
                <use href="../../icons/icons.svg#icon--hands-clapping" xlink:href="../../icons/icons.svg#icon--hands-clapping"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="house">

            <span class="doc-tooltip">
                ID: <strong>house</strong>
            </span>

            <svg class="icon is-house">
                <use href="../../icons/icons.svg#icon--house" xlink:href="../../icons/icons.svg#icon--house"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="linkedin-logo">

            <span class="doc-tooltip">
                ID: <strong>linkedin-logo</strong>
            </span>

            <svg class="icon is-linkedin-logo">
                <use href="../../icons/icons.svg#icon--linkedin-logo" xlink:href="../../icons/icons.svg#icon--linkedin-logo"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="magnifying-glass">

            <span class="doc-tooltip">
                ID: <strong>magnifying-glass</strong>
            </span>

            <svg class="icon is-magnifying-glass">
                <use href="../../icons/icons.svg#icon--magnifying-glass" xlink:href="../../icons/icons.svg#icon--magnifying-glass"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="plus">

            <span class="doc-tooltip">
                ID: <strong>plus</strong>
            </span>

            <svg class="icon is-plus">
                <use href="../../icons/icons.svg#icon--plus" xlink:href="../../icons/icons.svg#icon--plus"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="share-fat">

            <span class="doc-tooltip">
                ID: <strong>share-fat</strong>
            </span>

            <svg class="icon is-share-fat">
                <use href="../../icons/icons.svg#icon--share-fat" xlink:href="../../icons/icons.svg#icon--share-fat"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="upload-simple">

            <span class="doc-tooltip">
                ID: <strong>upload-simple</strong>
            </span>

            <svg class="icon is-upload-simple">
                <use href="../../icons/icons.svg#icon--upload-simple" xlink:href="../../icons/icons.svg#icon--upload-simple"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="x">

            <span class="doc-tooltip">
                ID: <strong>x</strong>
            </span>

            <svg class="icon is-x">
                <use href="../../icons/icons.svg#icon--x" xlink:href="../../icons/icons.svg#icon--x"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="youtube-logo">

            <span class="doc-tooltip">
                ID: <strong>youtube-logo</strong>
            </span>

            <svg class="icon is-youtube-logo">
                <use href="../../icons/icons.svg#icon--youtube-logo" xlink:href="../../icons/icons.svg#icon--youtube-logo"></use>
            </svg>

        </span>
    </div>

</div>
<div class="doc-variant">

    <header class="doc-variant-header">

        <h2 class="doc-variant-title">Bold</h2>

        <div class="doc-variant-configuration">

            <ul data-label="Weight">
                <li>bold</li>
            </ul>

        </div>

    </header>

    <div class="doc-icons" style="margin-top: var(--sp);">
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-left">

            <span class="doc-tooltip">
                ID: <strong>arrow-left</strong>
            </span>

            <svg class="icon is-arrow-left">
                <use href="../../icons/icons-bold.svg#icon--arrow-left" xlink:href="../../icons/icons-bold.svg#icon--arrow-left"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-line-down">

            <span class="doc-tooltip">
                ID: <strong>arrow-line-down</strong>
            </span>

            <svg class="icon is-arrow-line-down">
                <use href="../../icons/icons-bold.svg#icon--arrow-line-down" xlink:href="../../icons/icons-bold.svg#icon--arrow-line-down"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-return">

            <span class="doc-tooltip">
                ID: <strong>arrow-return</strong>
            </span>

            <svg class="icon is-arrow-return">
                <use href="../../icons/icons-bold.svg#icon--arrow-return" xlink:href="../../icons/icons-bold.svg#icon--arrow-return"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-right">

            <span class="doc-tooltip">
                ID: <strong>arrow-right</strong>
            </span>

            <svg class="icon is-arrow-right">
                <use href="../../icons/icons-bold.svg#icon--arrow-right" xlink:href="../../icons/icons-bold.svg#icon--arrow-right"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-square-out">

            <span class="doc-tooltip">
                ID: <strong>arrow-square-out</strong>
            </span>

            <svg class="icon is-arrow-square-out">
                <use href="../../icons/icons-bold.svg#icon--arrow-square-out" xlink:href="../../icons/icons-bold.svg#icon--arrow-square-out"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrow-top">

            <span class="doc-tooltip">
                ID: <strong>arrow-top</strong>
            </span>

            <svg class="icon is-arrow-top">
                <use href="../../icons/icons-bold.svg#icon--arrow-top" xlink:href="../../icons/icons-bold.svg#icon--arrow-top"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="arrows-out">

            <span class="doc-tooltip">
                ID: <strong>arrows-out</strong>
            </span>

            <svg class="icon is-arrows-out">
                <use href="../../icons/icons-bold.svg#icon--arrows-out" xlink:href="../../icons/icons-bold.svg#icon--arrows-out"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="calendar-plus">

            <span class="doc-tooltip">
                ID: <strong>calendar-plus</strong>
            </span>

            <svg class="icon is-calendar-plus">
                <use href="../../icons/icons-bold.svg#icon--calendar-plus" xlink:href="../../icons/icons-bold.svg#icon--calendar-plus"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="cloud-arrow-up">

            <span class="doc-tooltip">
                ID: <strong>cloud-arrow-up</strong>
            </span>

            <svg class="icon is-cloud-arrow-up">
                <use href="../../icons/icons-bold.svg#icon--cloud-arrow-up" xlink:href="../../icons/icons-bold.svg#icon--cloud-arrow-up"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="confetti">

            <span class="doc-tooltip">
                ID: <strong>confetti</strong>
            </span>

            <svg class="icon is-confetti">
                <use href="../../icons/icons-bold.svg#icon--confetti" xlink:href="../../icons/icons-bold.svg#icon--confetti"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="download-simple">

            <span class="doc-tooltip">
                ID: <strong>download-simple</strong>
            </span>

            <svg class="icon is-download-simple">
                <use href="../../icons/icons-bold.svg#icon--download-simple" xlink:href="../../icons/icons-bold.svg#icon--download-simple"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="envelope">

            <span class="doc-tooltip">
                ID: <strong>envelope</strong>
            </span>

            <svg class="icon is-envelope">
                <use href="../../icons/icons-bold.svg#icon--envelope" xlink:href="../../icons/icons-bold.svg#icon--envelope"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="eye-slash">

            <span class="doc-tooltip">
                ID: <strong>eye-slash</strong>
            </span>

            <svg class="icon is-eye-slash">
                <use href="../../icons/icons-bold.svg#icon--eye-slash" xlink:href="../../icons/icons-bold.svg#icon--eye-slash"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="eye">

            <span class="doc-tooltip">
                ID: <strong>eye</strong>
            </span>

            <svg class="icon is-eye">
                <use href="../../icons/icons-bold.svg#icon--eye" xlink:href="../../icons/icons-bold.svg#icon--eye"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="faders-horizontal">

            <span class="doc-tooltip">
                ID: <strong>faders-horizontal</strong>
            </span>

            <svg class="icon is-faders-horizontal">
                <use href="../../icons/icons-bold.svg#icon--faders-horizontal" xlink:href="../../icons/icons-bold.svg#icon--faders-horizontal"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="hands-clapping">

            <span class="doc-tooltip">
                ID: <strong>hands-clapping</strong>
            </span>

            <svg class="icon is-hands-clapping">
                <use href="../../icons/icons-bold.svg#icon--hands-clapping" xlink:href="../../icons/icons-bold.svg#icon--hands-clapping"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="house">

            <span class="doc-tooltip">
                ID: <strong>house</strong>
            </span>

            <svg class="icon is-house">
                <use href="../../icons/icons-bold.svg#icon--house" xlink:href="../../icons/icons-bold.svg#icon--house"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="linkedin-logo">

            <span class="doc-tooltip">
                ID: <strong>linkedin-logo</strong>
            </span>

            <svg class="icon is-linkedin-logo">
                <use href="../../icons/icons-bold.svg#icon--linkedin-logo" xlink:href="../../icons/icons-bold.svg#icon--linkedin-logo"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="magnifying-glass">

            <span class="doc-tooltip">
                ID: <strong>magnifying-glass</strong>
            </span>

            <svg class="icon is-magnifying-glass">
                <use href="../../icons/icons-bold.svg#icon--magnifying-glass" xlink:href="../../icons/icons-bold.svg#icon--magnifying-glass"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="plus">

            <span class="doc-tooltip">
                ID: <strong>plus</strong>
            </span>

            <svg class="icon is-plus">
                <use href="../../icons/icons-bold.svg#icon--plus" xlink:href="../../icons/icons-bold.svg#icon--plus"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="share-fat">

            <span class="doc-tooltip">
                ID: <strong>share-fat</strong>
            </span>

            <svg class="icon is-share-fat">
                <use href="../../icons/icons-bold.svg#icon--share-fat" xlink:href="../../icons/icons-bold.svg#icon--share-fat"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="upload-simple">

            <span class="doc-tooltip">
                ID: <strong>upload-simple</strong>
            </span>

            <svg class="icon is-upload-simple">
                <use href="../../icons/icons-bold.svg#icon--upload-simple" xlink:href="../../icons/icons-bold.svg#icon--upload-simple"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="x">

            <span class="doc-tooltip">
                ID: <strong>x</strong>
            </span>

            <svg class="icon is-x">
                <use href="../../icons/icons-bold.svg#icon--x" xlink:href="../../icons/icons-bold.svg#icon--x"></use>
            </svg>

        </span>
        <span class="doc-icon has-doc-tooltip" data-copy-text="youtube-logo">

            <span class="doc-tooltip">
                ID: <strong>youtube-logo</strong>
            </span>

            <svg class="icon is-youtube-logo">
                <use href="../../icons/icons-bold.svg#icon--youtube-logo" xlink:href="../../icons/icons-bold.svg#icon--youtube-logo"></use>
            </svg>

        </span>
    </div>

</div>


<!-- Default -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Arrow Left -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Arrow Line Down -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Arrow Return -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Arrow Right -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Arrow Square Out -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Arrow Top -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Arrows Out -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Calendar Plus -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Cloud Arrow Up -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Confetti -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Download Simple -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Envelope -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Eye Slash -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Eye -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Faders Horizontal -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Hands Clapping -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- House -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Linkedin Logo -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Magnifying Glass -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Plus -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Share Fat -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Upload Simple -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- X -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Youtube Logo -->
<svg class="icon is-{{id}}"><use href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}" xlink:href="{{path '/icons/icons{{#weight}}-{{.}}{{/weight}}.svg#icon--{{id}}' }}"></use></svg>

<!-- Doc Only -->
{{#weights}}
<div class="doc-variant">

    <header class="doc-variant-header">

        {{#label}}
            <h2 class="doc-variant-title">{{{.}}}</h2>
        {{/label}}

            {{#if weight}}
        <div class="doc-variant-configuration">

            <ul data-label="Weight">
                    {{#weight}}
                <li>{{{.}}}</li>
                    {{/weight}}
            </ul>

        </div>
            {{/if}}

    </header>

    <div class="doc-icons" style="margin-top: var(--sp);">
            {{#samples}}
        <span class="doc-icon has-doc-tooltip" data-copy-text="{{id}}">

            <span class="doc-tooltip">
                ID: <strong>{{{id}}}</strong>
            </span>

            {{render '@icon' (contextData '@icon' this) merge=false}}

        </span>
            {{/samples}}
    </div>

</div>
    {{/weights}}
 
/* Default */
{
  "src": "/icons/icons.svg"
}


/* Arrow Left */
{
  "src": "/icons/icons.svg",
  "id": "arrow-left"
}


/* Arrow Line Down */
{
  "src": "/icons/icons.svg",
  "id": "arrow-line-down"
}


/* Arrow Return */
{
  "src": "/icons/icons.svg",
  "id": "arrow-return"
}


/* Arrow Right */
{
  "src": "/icons/icons.svg",
  "id": "arrow-right"
}


/* Arrow Square Out */
{
  "src": "/icons/icons.svg",
  "id": "arrow-square-out"
}


/* Arrow Top */
{
  "src": "/icons/icons.svg",
  "id": "arrow-top"
}


/* Arrows Out */
{
  "src": "/icons/icons.svg",
  "id": "arrows-out"
}


/* Calendar Plus */
{
  "src": "/icons/icons.svg",
  "id": "calendar-plus"
}


/* Cloud Arrow Up */
{
  "src": "/icons/icons.svg",
  "id": "cloud-arrow-up"
}


/* Confetti */
{
  "src": "/icons/icons.svg",
  "id": "confetti"
}


/* Download Simple */
{
  "src": "/icons/icons.svg",
  "id": "download-simple"
}


/* Envelope */
{
  "src": "/icons/icons.svg",
  "id": "envelope"
}


/* Eye Slash */
{
  "src": "/icons/icons.svg",
  "id": "eye-slash"
}


/* Eye */
{
  "src": "/icons/icons.svg",
  "id": "eye"
}


/* Faders Horizontal */
{
  "src": "/icons/icons.svg",
  "id": "faders-horizontal"
}


/* Hands Clapping */
{
  "src": "/icons/icons.svg",
  "id": "hands-clapping"
}


/* House */
{
  "src": "/icons/icons.svg",
  "id": "house"
}


/* Linkedin Logo */
{
  "src": "/icons/icons.svg",
  "id": "linkedin-logo"
}


/* Magnifying Glass */
{
  "src": "/icons/icons.svg",
  "id": "magnifying-glass"
}


/* Plus */
{
  "src": "/icons/icons.svg",
  "id": "plus"
}


/* Share Fat */
{
  "src": "/icons/icons.svg",
  "id": "share-fat"
}


/* Upload Simple */
{
  "src": "/icons/icons.svg",
  "id": "upload-simple"
}


/* X */
{
  "src": "/icons/icons.svg",
  "id": "x"
}


/* Youtube Logo */
{
  "src": "/icons/icons.svg",
  "id": "youtube-logo"
}


/* Doc Only */
{
  "src": "/icons/icons.svg",
  "weights": [
    {
      "label": "Thin",
      "src": "/icons/icons-thin.svg",
      "weight": "thin",
      "samples": [
        {
          "id": "arrow-left",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "arrow-line-down",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "arrow-return",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "arrow-right",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "arrow-square-out",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "arrow-top",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "arrows-out",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "calendar-plus",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "cloud-arrow-up",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "confetti",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "download-simple",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "envelope",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "eye-slash",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "eye",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "faders-horizontal",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "hands-clapping",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "house",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "linkedin-logo",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "magnifying-glass",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "plus",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "share-fat",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "upload-simple",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "x",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        },
        {
          "id": "youtube-logo",
          "src": "/icons/icons-thin.svg",
          "weight": "thin"
        }
      ]
    },
    {
      "label": "Light",
      "src": "/icons/icons-light.svg",
      "weight": "light",
      "samples": [
        {
          "id": "arrow-left",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "arrow-line-down",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "arrow-return",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "arrow-right",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "arrow-square-out",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "arrow-top",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "arrows-out",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "calendar-plus",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "cloud-arrow-up",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "confetti",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "download-simple",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "envelope",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "eye-slash",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "eye",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "faders-horizontal",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "hands-clapping",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "house",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "linkedin-logo",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "magnifying-glass",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "plus",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "share-fat",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "upload-simple",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "x",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        },
        {
          "id": "youtube-logo",
          "src": "/icons/icons-light.svg",
          "weight": "light"
        }
      ]
    },
    {
      "label": "Medium (Default)",
      "src": "/icons/icons.svg",
      "samples": [
        {
          "id": "arrow-left",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "arrow-line-down",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "arrow-return",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "arrow-right",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "arrow-square-out",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "arrow-top",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "arrows-out",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "calendar-plus",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "cloud-arrow-up",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "confetti",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "download-simple",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "envelope",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "eye-slash",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "eye",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "faders-horizontal",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "hands-clapping",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "house",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "linkedin-logo",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "magnifying-glass",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "plus",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "share-fat",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "upload-simple",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "x",
          "src": "/icons/icons.svg",
          "weight": null
        },
        {
          "id": "youtube-logo",
          "src": "/icons/icons.svg",
          "weight": null
        }
      ]
    },
    {
      "label": "Bold",
      "src": "/icons/icons-bold.svg",
      "weight": "bold",
      "samples": [
        {
          "id": "arrow-left",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "arrow-line-down",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "arrow-return",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "arrow-right",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "arrow-square-out",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "arrow-top",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "arrows-out",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "calendar-plus",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "cloud-arrow-up",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "confetti",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "download-simple",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "envelope",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "eye-slash",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "eye",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "faders-horizontal",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "hands-clapping",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "house",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "linkedin-logo",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "magnifying-glass",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "plus",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "share-fat",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "upload-simple",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "x",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        },
        {
          "id": "youtube-logo",
          "src": "/icons/icons-bold.svg",
          "weight": "bold"
        }
      ]
    }
  ]
}
  • Content: 
    @function get-icon-data-url(
    $key: default,
    $color: $icon_color,
    $svgs: $icon_svgs,
){
        /*
         * Get data URL of selected icon
         *
         * $key: Name of selected icon
         * $color: Color of icon
         *   Color will be set by replacing `{{color}}` in the icon data variable
         * $svgs: Map with icons as SVGs
         */

    $data-url: "";

    @if map-has-key($svgs, $key) == false {
        @return $data-url;
    }

    $svg: map-get($svgs, $key);

    $data-url: get-svg-data-url($svg, $color);

    @return $data-url;

}

@function icon-url(
    $key: default,
    $color: $icon_color,
    $svgs: $icon_svgs,
){

    $icon_data: get-icon-data-url(
        $key: $key,
        $color: $color,
        $svgs: $svgs,
    );

    @return url('#{$icon_data}');
}
  • URL: /components/raw/icon/_icon.helpers.scss
  • Filesystem Path: components/02-elements/icon/_icon.helpers.scss
  • Size: 812 Bytes
  • Content: 
    @import "_icon.helpers";
@import "_icon.settings";
@import "_icon.styles";
  • URL: /components/raw/icon/_icon.scss
  • Filesystem Path: components/02-elements/icon/_icon.scss
  • Size: 75 Bytes
  • Content: 
    $icon_size: 24px !default;
$icon_color: $_text-color !default;

$icon_svgs: (
    demo: '<svg viewBox="0 0 32 32" fill="none" stroke="{{color}}" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="8.5"/></svg>',
) !default;
  • URL: /components/raw/icon/_icon.settings.scss
  • Filesystem Path: components/02-elements/icon/_icon.settings.scss
  • Size: 300 Bytes
  • Content: 
    %icon {
    display: inline-block;
    width: $icon_size;
    height: $icon_size;

    vertical-align: middle;
    flex-shrink: 0;
}

.icon {
    @extend %icon;
}
  • URL: /components/raw/icon/_icon.styles.scss
  • Filesystem Path: components/02-elements/icon/_icon.styles.scss
  • Size: 163 Bytes