logoKnah Tsaeb theme and design

Introduction

I needed to harmonize the styles across my different sites and services. Instead of copying and pasting my rules into each project, I preferred to create two stylesheets: one to define my variables and another to style the elements I use in at least two different projects. This makes updates and maintenance easier.

I tried to use semantic tags as much as possible and as few classes as possible.

More detail on git repositorie.

Color scheme (kt-scheme.css)

Color

Preview Note
--text-color-auto: light-dark(#171414, #fffbfb) --text-color-light: #171414 --text-color-dark: #fffbfb Toggle dark/light
--text-color-inverse-auto: light-dark(var(--text-color-dark), var(--text-color-light)) --text-color-inverse-dark: var(--text-color-light) --text-color-inverse-light: var(--text-color-dark) Toggle dark/light
--background-color-auto: light-dark(var(--text-color-dark), var(--text-color-light)) --background-color-light: var(--text-color-dark) --background-color-dark: var(--text-color-light) Toggle dark/light
--background-color-inverse-auto: light-dark(var(--text-color-light), var(--text-color-dark)) --background-color-inverse-light: var(--text-color-light) --background-color-inverse-dark: var(--text-color-dark) Toggle dark/light
--neutral: #777575 --neutral-medium: #aeadad --neutral-light: #e9e9e9
--primary: #cc2027 --primary-lighten: #d64c52 --primary-darken: #8e161b --primary-text-contrast: #fff
--secondary: #20ccc5 --secondary-lighten: #4cd6d0 --secondary-darken: #168e89 --secondary-text-contrast: #000
--error: #c43933 --error-lighten: #cf605b --error-darken: #892723 --error-text-contrast: #fff
--info: #206ccc --info-lighten: #4c89d6 --info-darken: #164b8e --info-text-contrast: #fff
--success: #7dcc20 --success-lighten: #97d64c --success-darken: #578e16 --success-text-contrast: #000
--warning: #cc5e20 --warning-lighten: #d67e4c --warning-darken: #8e4116 --warning-text-contrast: #000
--h1-color: var(--primary)
--h2-color: #c33d35
--h3-color: #b94f44
--h4-color: #ae5e52
--h5-color: #a16a61
--h6-color: #927671
--box-shadow-auto: .4rem .4rem 0px .1rem light-dark(var(--neutral-medium), var(--neutral)) --box-shadow-light: .4rem .4rem 0px .1rem var(--neutral) --box-shadow-dark: .4rem .4rem 0px .1rem var(--neutral-light) Toggle dark/light

Other

Variable Value
--font-size --font-size: 1.3em;
--default-space --default-space: .2rem;
--border-radius --border-radius: .3rem;

Components

View code
<header class="banner">
    <hgroup>
        <h1>
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAgMTIwIiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEyMCI+CiAgPHJlY3Qgd2lkdGg9IjEyMCIgaGVpZ2h0PSIxMjAiIGZpbGw9IiNjY2NjY2MiPjwvcmVjdD4KICA8dGV4dCB4PSI1MCUiIHk9IjUwJSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9Im1vbm9zcGFjZSIgZm9udC1zaXplPSIyNnB4IiBmaWxsPSIjMzMzMzMzIj5Mb2dvPC90ZXh0PiAgIAo8L3N2Zz4="
                height="120"
                loading="lazy"
                alt="logo"><a href="/">Site name</a>
        </h1>
        <p>
            Optional text
        </p>
    </hgroup>

    <nav role="navigation">
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#" class="active">Link 3</a></li>
            <li aria-haspopup="true">Sub menu
                <ul class="dropdown" aria-label="submenu">
                    <li><a href="#">Sub-1</a></li>
                    <li><a href="#">Sub-2</a></li>
                    <li><a href="#">Sub-3</a></li>
                </ul>
            </li>
            <li><a href="#" class="toggle-dark-mode">
                    <svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
                        <title>ui-light-dark</title>
                        <use href="assets/sprites/fullSet.svg#ui-light-dark"></use>
                    </svg>
                </a>
            </li>
        </ul>
    </nav>
</header>                
View code
<nav aria-label="breadcrumb" class="breadcrumb">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Sub level 1</a></li>
        <li><a href="#">Sub level 2</a></li>
        <li>Sub level 3</li>
    </ul>
</nav>

Article/section

Title

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere quia eos, doloribus quis facilis soluta vero voluptate, doloremque incidunt, molestiae necessitatibus quae modi nihil vel labore officia beatae itaque aut?
View code
<article>
    <h4>Title</h4>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere quia eos, doloribus quis facilis soluta vero voluptate, doloremque incidunt, molestiae necessitatibus quae modi nihil vel labore officia beatae itaque aut?
</article>

Pagination

View code
<nav class="pagination">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a class="current" href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li><a href="#">6</a></li>
    </ul>
</nav>

Table of content

Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod leo eros aptent montes ultricies magnis. Fusce eu eros dapibus rhoncus egestas elit vivamus. Ac est nisi feugiat cubilia fermentum aliquet lobortis. In nostra aenean a praesent consectetur ac sapien. Sapien senectus class vehicula accumsan ultricies egestas sit. Posuere purus posuere netus interdum quam blandit amet. Lorem rutrum fusce vivamus quisque aliquam mi ligula.

Gravida aliquet laoreet venenatis id magnis tempor quis. Litora sociosqu adipiscing arcu luctus ultrices lectus magnis. Lacus erat iaculis nascetur semper conubia commodo dictumst. Ullamcorper blandit leo sodales venenatis sociosqu vivamus gravida. Purus posuere condimentum nisl nec imperdiet aliquam mollis. Volutpat potenti parturient rhoncus lacinia semper morbi ad. Penatibus integer nec arcu mollis sapien vestibulum integer.

Vitae diam sociis parturient eu pulvinar netus faucibus. Tortor porttitor gravida donec orci venenatis placerat cum. Lacus quisque nostra tortor tempus conubia varius lectus. Dignissim rhoncus rutrum condimentum placerat gravida quisque lobortis. Platea ultricies lectus porttitor mollis conubia consectetur dictumst.

View code
<nav class="table-of-contents">
    <h3 id="table-of-contents">Table of content</h3>
    <ul>
        <li><a href="#table-of-contents">TOC</a></li>
        <li><a href="#content-h2-heading">Level 2</a>
            <ul>
                <li><a href="#content-h3-heading">Level 3</a>
                    <ul>
                        <li><a href="#content-h4-heading">Level 4</a>
                            <ul>
                                <li><a href="#content-h5-heading">Level 5</a>
                                    <ul>
                                        <li><a href="#content-h6-heading">Level 6</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#block">Block</a></li>
        <li><a href="#typography">Typography</a></li>
        <li><a href="#content-blockquotes">Blockquotes</a></li>
        <li><a href="#content-lists">Lists</a></li>
    </ul>
</nav>
View code
<div class="flex gallery">
    <figure>
        <a href="img/placeholder.svg">
            <img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
        </a>
        <figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
    </figure>
    <figure>
        <a href="img/placeholder.svg">
            <img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
        </a>
        <figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
    </figure>
     <figure>
        <a href="img/placeholder.svg">
            <img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
        </a>
        <figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
    </figure>
    <figure>
        <a href="img/placeholder.svg">
            <img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
        </a>
        <figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
    </figure>
    <figure>
        <a href="img/placeholder.svg">
            <img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
        </a>
        <figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
    </figure>
    <figure>
        <a href="img/placeholder.svg">
            <img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
        </a>
        <figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
    </figure>
    <figure>
        <a href="img/placeholder.svg">
            <img src="icons/placeholder.svg" width="250" height="250" alt="placeholder">
        </a>
        <figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
    </figure>
    <figure>
        <a href="img/placeholder.svg">
            <img src="img/placeholder.svg" width="250" height="250" alt="placeholder">
        </a>
        <figcaption title="Title with looooooooooooong text">Title with looooooooooooong text</figcaption>
    </figure>
</div>

Admonition

With header

View code
<aside class="admonition adm-caution">
    <header><svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
        <title>admonition-caution</title>
        <use href="assets/sprites/fullSet.svg#admonition-caution"></use>
    </svg>Caution</header>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur cupiditate tenetur sunt eos, nesciunt magnam? Iste, quam in, hic accusamus ipsum optio alias soluta nisi at quidem, vero recusandae totam.
</aside>

Without header

View code
<aside class="admonition adm-warning">
    <svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
        <title>admonition-warning</title>
        <use href="assets/sprites/fullSet.svg#admonition-warning"></use>
    </svg>
    <b>Warning</b> Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur cupiditate tenetur sunt eos, nesciunt magnam? Iste, quam in, hic accusamus ipsum optio alias soluta nisi at quidem, vero recusandae totam.
</aside>

Admonitions with img rather than "use" element

For security reasons, browsers may apply the same-origin policy on use elements and may refuse to load a cross-origin URL in the href attribute. There is currently no defined way to set a cross-origin policy for use elements.

MDN web docs, <use>

When you use SVG like img, you can't change color. That's reason the admonitions icons exist in color.

View code
<aside class="admonition adm-note">
    <header><img src="assets/icons/admonition-note-colored.svg" height="32" width="32" alt="icon note"> Note</header>
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Aspernatur cupiditate tenetur sunt eos, nesciunt magnam? Iste, quam in, hic accusamus ipsum optio alias soluta nisi at quidem, vero recusandae totam.
</aside>

Cards

290x290

Title 1

Short description

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quam corporis doloremque delectus culpa accusamus tempore magnam reiciendis libero incidunt molestias, laboriosam, voluptatem ab necessitatibus iusto blanditiis modi numquam voluptate.

Title 2

Short description

290x290

Lorem ipsum dolor sit amet consectetu uptatem ab necessitatibus iusto blanditiis modi numquam voluptate.

290x290

Title 3

Lorem ipsum dolor laboriosam, voluptatem ab necessitatibus iusto blanditiis modi numquam voluptate.

290x290

Title 4

Short description

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque quam corporis doloremque delectus culpa accusamus tempore magnam reiciendis libero incidunt molestias, laboriosam, voluptatem ab necessitatibus iusto blanditiis modi numquam voluptate.

290x290

Title

Short description

Lorem ipsum dolor sit amet consectetur adipisic.

View code
<div class="cards">
    <article>
        <header>
            <h4>Title</h4>
            <p>Short description</p>
        </header>

        <figure>
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 290 290" width="290" height="290">
                <rect width="290" height="290" fill="#cccccc"></rect>
                <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="monospace" font-size="26px" fill="#333333">290x290</text>
            </svg>
        </figure>

        <p>Lorem ipsum dolor sit amet consectetu uptatem ab necessitatibus iusto blanditiis modi numquam voluptate.</p>

        <footer>
            <a href="#">Read more</a>
        </footer>
    </article>
</div>
View code
<footer>
    <a href="/about">/about</a> me | about this site in <a href="/colophon">/colophon</a> | <a href="/contact">/contact</a>
    <p>
        Build in : 0.00096s
    </p>
</footer>

Typography

Headings

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
View code
<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

Text modifier

  • <abbr> Abbreviation or acronym
  • <strong> Strong importance
  • <b> Bring attention
  • <i> Idiomatic text
  • <em> Emphasis
  • <cite> Citation
  • <del> Deleted
  • <ins> Inserted
  • <kbd> Keyboard
  • <mark> Mark text
  • <s> Strikethrough
  • <small> Side comment
  • <sub> Subscript
  • <sup> Superscript
  • <u> Unarticulated Annotation

Color

Default

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.

Button

Link button

Outline button

Link button

Horizontal rule

Primary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.

Button

Link button

Outline button

Link button

Horizontal rule

Secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.

Button

Link button

Outline button

Link button

Horizontal rule

Error

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.

Button

Link button

Outline button

Link button

Horizontal rule

Success

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.

Button

Link button

Outline button

Link button

Horizontal rule

Warning

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.

Button

Link button

Outline button

Link button

Horizontal rule

Info

Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.

Button

Link button

Outline button

Link button

Horizontal rule

View code
<h4 id="color-info">Info</h4>
<p class="info">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel labore cumque excepturi laboriosam eos unde quidem dolores nobis numquam incidunt architecto nemo, voluptatum facilis pariatur. Dolorem eligendi nisi repudiandae obcaecati.
</p>
<h5>Button</h5>
<p class="flex">
    <input class="info" type="reset" value="Input reset">
    <input class="info" type="button" value="Input button">
    <a href="#" class="info" role="button">Link button</a>
    <button class="info">Button</button>
</p>

<h5>Outline button</h5>
<p class="flex">
    <input class="outline info" type="reset" value="Input reset">
    <input class="outline info" type="button" value="Input button">
    <a class="outline info" href="#" role="button">Link button</a>
    <button class="outline info">Button</button>
</p>

<h5>Horizontal rule</h5>
<hr class="text-info">

Blockquote

Porttitor laoreet conubia eleifend ante ullamcorper rhoncus blandit imperdiet. Montes rhoncus mollis pharetra convallis blandit inceptos diam adipiscing. Fusce massa laoreet taciti lacinia vel posuere interdum at. Neque ultrices enim lacinia litora nisl sed varius natoque.

John Doe, Lorem generator

View code
<blockquote>
    Porttitor laoreet conubia eleifend ante ullamcorper rhoncus blandit imperdiet. Montes rhoncus mollis pharetra convallis blandit inceptos diam adipiscing. Fusce massa laoreet taciti lacinia vel posuere interdum at. Neque ultrices enim lacinia litora nisl sed varius natoque.
    <p>John Doe, <cite>Lorem generator</cite></p>
</blockquote>

Lists

  1. Item 1
  2. Item 2
    1. Item 2a
    2. Item 2b
    3. Item 2c
  3. Item 3
View code
<ul>
    <li>Item 1</li>
    <li>Item 2
        <ul>
            <li>Item 2a</li>
            <li>Item 2b</li>
            <li>Item 2c</li>
        </ul>
    </li>
    <li>Item 3</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2
        <ol>
            <li>Item 2a</li>
            <li>Item 2b</li>
            <li>Item 2c</li>
        </ol>
    </li>
    <li>Item 3</li>
</ol>

Figure

Minimal landscape
Figure with image by KOBU Agency from unsplash.com
View code
<figure>
    <img src="img/kobu-agency-ipARHaxETRk-unsplash.webp" alt="Minimal landscape">
    <figcaption>
        Figure with image by
        <a href="https://unsplash.com/fr/photos/smartphone-blanc-sur-deux-livres-a-reliure-souple-ipARHaxETRk" target="_blank">KOBU Agency from unsplash.com</a>
    </figcaption>
</figure>

Table

Example of styled table
# Heading Heading Heading Heading Heading Heading Heading
1 Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell
3 Cell Cell Cell Cell Cell Cell Cell
View code
<table>
    <caption>Example of styled table</caption>
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
            <th scope="col">Heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
            <td>Cell</td>
        </tr>
    </tbody>
</table>

Form elements

Curabitur consequat lacus at lacus porta finibus.
Checkboxes
Radio buttons
View code
<form>
    <label for="search">Search</label>
    <input type="search" id="search" name="search" placeholder="Search">

    <label for="text">Text</label>
    <input type="text" id="text" name="text" placeholder="Text">
    <small>Curabitur consequat lacus at lacus porta finibus.</small>

    <label for="select">Select</label>
    <select id="select" name="select" required>
        <option value="">Select…</option>
        <optgroup label="Optgroup">
            <option>Option 1</option>
            <option>Option 2</option>
        </optgroup>
        <option>Option 3</option>
        <option selected>Option 4</option>
        <option>…</option>
    </select>

    <label for="textarea">Textarea</label>
    <textarea name="textarea" id="textarea">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad, ipsum dicta. Qui, quia, error quidem et delectus fuga perferendis aperiam illum rem aut dolor odio expedita laboriosam repudiandae voluptatibus placeat!
    </textarea>

    <label for="file">File browser
        <input type="file" id="file" name="file">
    </label>

    <label for="range">Range slider
        <input type="range" min="0" max="100" value="50" id="range" name="range">
    </label>

    <div class="grid">
        <label for="date">Date
            <input type="date" id="date" name="date">
        </label>

        <label for="time">Time
            <input type="time" id="time" name="time">
        </label>

        <label for="color">Color
            <input type="color" id="color" name="color" value="#0eaaaa">
        </label>
    </div>

    <div class="grid">
        <fieldset>
            <legend>Checkboxes</legend>
            <label for="checkbox-1">
                <input type="checkbox" id="checkbox-1" name="checkbox-1" checked>
                Checkbox
            </label>
            <label for="checkbox-2">
                <input type="checkbox" id="checkbox-2" name="checkbox-2">
                Checkbox
            </label>
        </fieldset>

        <fieldset>
            <legend>Radio buttons</legend>
            <label for="radio-1">
                <input type="radio" id="radio-1" name="radio" value="radio-1" checked>
                Radio button
            </label>
            <label for="radio-2">
                <input type="radio" id="radio-2" name="radio" value="radio-2">
                Radio button
            </label>
        </fieldset>
    </div>

    <input type="reset" value="Reset" onclick="event.preventDefault()">
    <input type="submit" value="Submit">
</form>

Icons

You have 3 possibilities for using SVG icons :

Sprite (my preference)

Pro Con
Easy styling with CSS When add/remove/edit icon, need to regen
Minimise traffic, load one ressource (mitigate with HTTP/2) Code more verbose than img element
Use browser cache Cannot cross domain (limitation of element use)
Fast and light

Usage:

<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-caution</title>
    <use href="assets/sprites/fullSet.svg#admonition-caution"></use>
</svg>

Inline

Pro Con
Easy styling with CSS HTML file are more weight
Minimise request, icon are in HTML (mitigate with HTTP/2) HTML are more verbose
Fast and light Not reusabble, you need duplicate code in HTML file
Mixing content and presentation

Usage:

<svg id="admonition-caution" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
    <path d="M7.254.545L.545 7.255v9.49l6.71 6.71h9.49l6.71-6.71v-9.49l-6.71-6.71h-9.49zm.79 1.91h7.911l5.59 5.59v7.91l-5.59 5.59h-7.91l-5.59-5.59V8.046l5.59-5.59zm3 3.815v7.64h1.912V6.27h-1.912zm0 9.55v1.91h1.912v-1.91h-1.912z" transform="translate(-1.142 -1.142) scale(2.09516)"/>
</svg>

Like img

Pro Con
Simply use Can't use CSS for customise (need one file per color you need)
Light element HTML are more verbose
Use browser cache Not reusabble, you need duplicate code in HTML file

Usage:

<img class="svg-icon" src="assets/icons/admonition-caution.svg" alt="admonition-caution">

Icons list

admonition-caution-colored
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-caution-colored</title>
    <use href="assets/sprites/fullSet.svg#admonition-caution-colored"></use>
</svg>
Inline
<svg id="admonition-caution-colored" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
    <path
        d="M7.254.545L.545 7.255v9.49l6.71 6.71h9.49l6.71-6.71v-9.49l-6.71-6.71h-9.49zm.79 1.91h7.911l5.59 5.59v7.91l-5.59 5.59h-7.91l-5.59-5.59V8.046l5.59-5.59zm3 3.815v7.64h1.912V6.27h-1.912zm0 9.55v1.91h1.912v-1.91h-1.912z"
        transform="translate(-1.142 -1.142) scale(2.09516)" fill="#c43933" />
</svg>
Img admonition-caution-colored
<img class="svg-icon" src="assets/icons/admonition-caution-colored.svg" alt="admonition-caution-colored">
admonition-caution
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-caution</title>
    <use href="assets/sprites/fullSet.svg#admonition-caution"></use>
</svg>
Inline
<svg id="admonition-caution" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M7.254.545L.545 7.255v9.49l6.71 6.71h9.49l6.71-6.71v-9.49l-6.71-6.71h-9.49zm.79 1.91h7.911l5.59 5.59v7.91l-5.59 5.59h-7.91l-5.59-5.59V8.046l5.59-5.59zm3 3.815v7.64h1.912V6.27h-1.912zm0 9.55v1.91h1.912v-1.91h-1.912z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>
Img admonition-caution
<img class="svg-icon" src="assets/icons/admonition-caution.svg" alt="admonition-caution">
admonition-important-colored
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-important-colored</title>
    <use href="assets/sprites/fullSet.svg#admonition-important-colored"></use>
</svg>
Inline
<svg version="1.1" id="admonition-important-colored" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-64-85.333v37h18.3l15.7 11v-11h14v-37h-48zm4 4h40v29h-14v8l-11.7-8H-60v-29zm17.244 2.705l.826 15.912h3.961l.824-15.912h-5.61zm2.807 18.486c-.793 0-1.475.209-2.047.627-.55.418-.826 1.134-.826 2.147 0 .968.276 1.673.826 2.113.572.418 1.254.627 2.047.627.77 0 1.43-.21 1.98-.627.572-.44.858-1.145.858-2.113 0-1.013-.286-1.729-.858-2.147-.55-.418-1.21-.627-1.98-.627z" transform="translate(64 85.333)" fill="#c43933"/></svg>
Img admonition-important-colored
<img class="svg-icon" src="assets/icons/admonition-important-colored.svg" alt="admonition-important-colored">
admonition-important
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-important</title>
    <use href="assets/sprites/fullSet.svg#admonition-important"></use>
</svg>
Inline
<svg version="1.1" id="admonition-important" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-64-85.333v37h18.3l15.7 11v-11h14v-37h-48zm4 4h40v29h-14v8l-11.7-8H-60v-29zm17.244 2.705l.826 15.912h3.961l.824-15.912h-5.61zm2.807 18.486c-.793 0-1.475.209-2.047.627-.55.418-.826 1.134-.826 2.147 0 .968.276 1.673.826 2.113.572.418 1.254.627 2.047.627.77 0 1.43-.21 1.98-.627.572-.44.858-1.145.858-2.113 0-1.013-.286-1.729-.858-2.147-.55-.418-1.21-.627-1.98-.627z" transform="translate(64 85.333)"/></svg>
Img admonition-important
<img class="svg-icon" src="assets/icons/admonition-important.svg" alt="admonition-important">
admonition-note-colored
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-note-colored</title>
    <use href="assets/sprites/fullSet.svg#admonition-note-colored"></use>
</svg>
Inline
<svg version="1.1" id="admonition-note-colored" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0C10.745 0 0 10.745 0 24s10.745 24 24 24 24-10.745 24-24S37.255 0 24 0zm0 4c10.587 0 20 9.413 20 20s-9.413 20-20 20S4 34.587 4 24 13.413 4 24 4zm-1.988 9v4.002h3.98V13h-3.98zM20 19.016v3.998h2v7.984h-2V35h8.004v-4.002h-2.002V19.016H20z" fill="#206ccc"/></svg>
Img admonition-note-colored
<img class="svg-icon" src="assets/icons/admonition-note-colored.svg" alt="admonition-note-colored">
admonition-note
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-note</title>
    <use href="assets/sprites/fullSet.svg#admonition-note"></use>
</svg>
Inline
<svg version="1.1" id="admonition-note" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0C10.745 0 0 10.745 0 24s10.745 24 24 24 24-10.745 24-24S37.255 0 24 0zm0 4c10.587 0 20 9.413 20 20s-9.413 20-20 20S4 34.587 4 24 13.413 4 24 4zm-1.988 9v4.002h3.98V13h-3.98zM20 19.016v3.998h2v7.984h-2V35h8.004v-4.002h-2.002V19.016H20z"/></svg>
Img admonition-note
<img class="svg-icon" src="assets/icons/admonition-note.svg" alt="admonition-note">
admonition-tip-colored
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-tip-colored</title>
    <use href="assets/sprites/fullSet.svg#admonition-tip-colored"></use>
</svg>
Inline
<svg version="1.1" id="admonition-tip-colored" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M197.328 0v64.003h32.01V0h-32.01zM73.79 51.17L51.167 73.791l45.263 45.263 22.622-22.623L73.79 51.17zm279.089 0l-45.263 45.262 22.622 22.623L375.5 73.792l-22.622-22.623zM213.333 85.33c-70.692 0-128.005 57.313-128.005 128.006 0 47.378 25.744 88.738 64.003 110.87v81.12l21.328 21.346h21.346c0 11.782 9.546 21.328 21.328 21.328s21.328-9.546 21.328-21.328h21.347l21.328-21.346v-81.12c38.259-22.132 64.003-63.492 64.003-110.87 0-70.693-57.313-128.005-128.006-128.005zm0 42.675c47.129 0 85.331 38.203 85.331 85.33 0 47.13-38.202 85.332-85.33 85.332-47.129 0-85.331-38.203-85.331-85.331s38.202-85.33 85.33-85.33zM-.003 197.331v32.01H64v-32.01H-.003zm362.67 0v32.01h64.002v-32.01h-64.002zM96.43 307.617l-45.263 45.245 22.622 22.64 45.263-45.262-22.622-22.623zm233.807 0l-22.622 22.623 45.263 45.263 22.622-22.641-45.263-45.245zm-138.232 31.938a128.789 128.789 0 0021.328 1.786c7.27 0 14.39-.622 21.328-1.786v44.442h-42.656v-44.442z" transform="translate(1.143) scale(.10714)" fill="#7dcc20"/></svg>
Img admonition-tip-colored
<img class="svg-icon" src="assets/icons/admonition-tip-colored.svg" alt="admonition-tip-colored">
admonition-tip
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-tip</title>
    <use href="assets/sprites/fullSet.svg#admonition-tip"></use>
</svg>
Inline
<svg version="1.1" id="admonition-tip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 9.143c7.574 0 13.714 6.14 13.714 13.714 0 5.076-2.758 9.508-6.857 11.88v8.692l-2.286 2.285h-2.285a2.286 2.286 0 01-4.572 0H19.43l-2.286-2.285v-8.692a13.709 13.709 0 01-6.857-11.88c0-7.574 6.14-13.714 13.714-13.714zm2.286 27.239a13.807 13.807 0 01-4.572 0v4.76h4.572zm-14.812-3.423l2.424 2.424-4.848 4.849-2.425-2.425zm25.052 0l4.849 4.848-2.425 2.425-4.848-4.849zM24 13.714A9.143 9.143 0 1024 32a9.143 9.143 0 000-18.286zm22.857 7.429v3.428H40v-3.428zM8 21.143v3.428H1.143v-3.428zm30.95-15.66l2.425 2.424-4.85 4.849-2.423-2.425zm-29.9 0l4.848 4.848-2.424 2.425-4.849-4.85zM25.714 0v6.857h-3.428V0z"/></svg>
Img admonition-tip
<img class="svg-icon" src="assets/icons/admonition-tip.svg" alt="admonition-tip">
admonition-warning-colored
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-warning-colored</title>
    <use href="assets/sprites/fullSet.svg#admonition-warning-colored"></use>
</svg>
Inline
<svg version="1.1" id="admonition-warning-colored" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0a2 2 0 00-1.79 1.105l-22 44A2 2 0 002 48h44a2 2 0 001.79-2.895l-22-44A2 2 0 0024 0zm0 6.473L42.764 44H5.236L24 6.473zm-2.95 10.406l.872 16.828h4.19l.872-16.828h-5.933zm2.968 19.55c-.838 0-1.56.223-2.164.665-.582.442-.874 1.197-.874 2.267 0 1.024.292 1.77.874 2.235.605.442 1.326.664 2.164.664.814 0 1.511-.222 2.093-.664.605-.466.909-1.21.909-2.235 0-1.07-.304-1.825-.909-2.267-.582-.442-1.279-.664-2.093-.664z" fill="#cc5e20"/></svg>
Img admonition-warning-colored
<img class="svg-icon" src="assets/icons/admonition-warning-colored.svg" alt="admonition-warning-colored">
admonition-warning
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>admonition-warning</title>
    <use href="assets/sprites/fullSet.svg#admonition-warning"></use>
</svg>
Inline
<svg version="1.1" id="admonition-warning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0a2 2 0 00-1.79 1.105l-22 44A2 2 0 002 48h44a2 2 0 001.79-2.895l-22-44A2 2 0 0024 0zm0 6.473L42.764 44H5.236L24 6.473zm-2.95 10.406l.872 16.828h4.19l.872-16.828h-5.933zm2.968 19.55c-.838 0-1.56.223-2.164.665-.582.442-.874 1.197-.874 2.267 0 1.024.292 1.77.874 2.235.605.442 1.326.664 2.164.664.814 0 1.511-.222 2.093-.664.605-.466.909-1.21.909-2.235 0-1.07-.304-1.825-.909-2.267-.582-.442-1.279-.664-2.093-.664z"/></svg>
Img admonition-warning
<img class="svg-icon" src="assets/icons/admonition-warning.svg" alt="admonition-warning">
file-audio
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-audio</title>
    <use href="assets/sprites/fullSet.svg#file-audio"></use>
</svg>
Inline
<svg id="file-audio" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l1.714 1.716 1.715 1.714h-3.43v-3.43zm.96 7.067l-7.64 1.28v4.54a1.97 1.97 0 00-.772.172 1.98 1.98 0 00-1.136 1.873 1.969 1.969 0 001.954 1.858 1.98 1.98 0 001.813-1.23 1.99 1.99 0 00.05-1.289v-4.308l3.821-.64v2.698h-.005a1.918 1.918 0 00-1.905 1.903 1.92 1.92 0 001.905 1.907c1.04 0 1.906-.866 1.906-1.907h.01V9.912zm-7.64 7.735v.035a.206.206 0 010-.035z" transform="matrix(2.09535 0 0 2.09515 -1.144 -1.142)"/></svg>
Img file-audio
<img class="svg-icon" src="assets/icons/file-audio.svg" alt="file-audio">
file-block
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-block</title>
    <use href="assets/sprites/fullSet.svg#file-block"></use>
</svg>
Inline
<svg viewBox="0 0 48 48" id="file-block" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.449.39l3.43 3.43h-3.43v-3.43zM12 9.135c-3.15 0-5.725 2.574-5.725 5.724 0 3.15 2.575 5.725 5.725 5.725 3.15 0 5.725-2.574 5.725-5.725 0-3.15-2.575-5.724-5.725-5.724zm0 1.91a3.8 3.8 0 011.945.528l-5.233 5.225a3.801 3.801 0 01-.526-1.939A3.8 3.8 0 0112 11.045zm3.293 1.882a3.8 3.8 0 01.52 1.932A3.801 3.801 0 0112 18.676a3.801 3.801 0 01-1.938-.526l5.23-5.223z" transform="matrix(2.09536 0 0 2.09514 -1.143 -1.142)"/></svg>
Img file-block
<img class="svg-icon" src="assets/icons/file-block.svg" alt="file-block">
file-broken
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-broken</title>
    <use href="assets/sprites/fullSet.svg#file-broken"></use>
</svg>
Inline
<svg viewBox="0 0 48 48" id="file-broken" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4.002 0v25.068l7.992 5.336 6.014-3.998 5.97 4.002 6.016-4.006 6.016 4.002 7.994-5.336v-13.9L32.836 0H4.002zm4.002 4.002h19.992V16.01h12.006v6.924L36.006 25.6l-6.012-4.002-6.008 3.998-5.97-4.002-6.018 4.006-3.994-2.668V4.002zm23.992.818l7.186 7.188h-7.186V4.82zM4.002 28.266v19.736h40.002V28.266l-7.998 5.336-6.012-3.998-6.008 3.998-5.97-4.002-6.018 4.002-7.996-5.336zm25.992 6.14l6.016 4.004L40 35.746V44H8.006v-8.254l3.988 2.664 6.014-3.998 5.97 3.998 6.016-4.004z"/></svg>
Img file-broken
<img class="svg-icon" src="assets/icons/file-broken.svg" alt="file-broken">
file-code
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-code</title>
    <use href="assets/sprites/fullSet.svg#file-code"></use>
</svg>
Inline
<svg viewBox="0 0 48 48" id="file-code" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v48h40V11.168L32.832 0H4zm4.004 4.002H27.99v12.006h12.006v27.99H8.004V4.002zm23.988.818l7.186 7.186h-7.186V4.82zM16.594 18.582L9.16 26.014l7.436 7.406 2.824-2.836-4.596-4.574 4.596-4.596-2.826-2.832zm14.812 0l-2.828 2.832 4.598 4.596-4.598 4.574 2.824 2.836 7.438-7.406-7.434-7.432zm-7.316.785l-3.983 12.006 3.803 1.262 3.983-12.006-3.803-1.262z"/></svg>
Img file-code
<img class="svg-icon" src="assets/icons/file-code.svg" alt="file-code">
file-empty
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-empty</title>
    <use href="assets/sprites/fullSet.svg#file-empty"></use>
</svg>
Inline
<svg viewBox="0 0 48 48" id="file-empty" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l1.714 1.716 1.715 1.714h-3.43v-3.43z" transform="matrix(2.09535 0 0 2.09515 -1.144 -1.142)"/></svg>
Img file-empty
<img class="svg-icon" src="assets/icons/file-empty.svg" alt="file-empty">
file-image
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-image</title>
    <use href="assets/sprites/fullSet.svg#file-image"></use>
</svg>
Inline
<svg viewBox="0 0 48 48" id="file-image" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.454zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l3.43 3.43h-3.43v-3.43zm-6.206 6.29c-.781 0-1.433.654-1.433 1.435s.652 1.436 1.433 1.436a1.45 1.45 0 001.435-1.436A1.45 1.45 0 009.61 9.134zm0 .96c.25 0 .477.224.477.475a.492.492 0 01-.477.474.49.49 0 01-.475-.474.49.49 0 01.475-.474zM14.039 12l-2.879 4.47-2.02-3.04-2.87 4.3h11.46L14.04 12z" transform="translate(-1.142 -1.142) scale(2.09518)"/></svg>
Img file-image
<img class="svg-icon" src="assets/icons/file-image.svg" alt="file-image">
file-info
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-info</title>
    <use href="assets/sprites/fullSet.svg#file-info"></use>
</svg>
Inline
<svg viewBox="0 0 48 48" id="file-info" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M4 0v48h40V11.168L32.832 0zm4.002 4.002H27.99v12.006h12.008v27.99H8.002zm23.99.818l3.594 3.594 3.594 3.592h-7.188zm-9.98 13.176v4.002h3.976v-4.002zm-2.014 6.016v3.998h2v7.984h-2v4.002h8.004v-4.002h-2V24.012z"/></svg>
Img file-info
<img class="svg-icon" src="assets/icons/file-info.svg" alt="file-info">
file-pres
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-pres</title>
    <use href="assets/sprites/fullSet.svg#file-pres"></use>
</svg>
Inline
<svg id="file-pres" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-7.345-16.865v46.429h38.69V-6.062L20.543-16.865H-7.345zm3.87 3.871H15.86V-1.38h11.614v27.074H-3.474v-38.687zm23.206.792l3.476 3.476 3.476 3.474H19.73v-6.95zM.48.348v19.2h5.8l-2.92 2.066v1.967h4.88l1.826-1.587v1.611h3.87v-1.68l1.94 1.686h4.878v-1.967l-2.963-2.097h5.73V.347H.48zm3.869 3.869H19.65v11.461H4.35V4.217z" transform="translate(11.594 17.436) scale(1.03385)"/></svg>
Img file-pres
<img class="svg-icon" src="assets/icons/file-pres.svg" alt="file-pres">
file-spread
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-spread</title>
    <use href="assets/sprites/fullSet.svg#file-spread"></use>
</svg>
Inline
<svg viewBox="0 0 48 48" id="file-spread" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M5.716.668v48h40V11.836L34.548.668H5.716zM9.718 4.67h19.988v12.006h12.008v27.99H9.718V4.67zm23.99.818l3.594 3.594 3.593 3.592h-7.187V5.488zm-19.992 13.18v24h24v-24h-24zm4 4h6v6h-6v-6zm10 0h6v6h-6v-6zm-10 10h6v6h-6v-6zm10 0h6v6h-6v-6z" transform="translate(-1.716 -.668)"/></svg>
Img file-spread
<img class="svg-icon" src="assets/icons/file-spread.svg" alt="file-spread">
file-text
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-text</title>
    <use href="assets/sprites/fullSet.svg#file-text"></use>
</svg>
Inline
<svg viewBox="0 0 48 48" id="file-text" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l1.714 1.716 1.715 1.714h-3.43v-3.43zm-9.546 7.25v1.91h11.462v-1.91H6.269zm0 3.81v1.91h11.462v-1.91H6.269zm0 3.82v1.91h11.462v-1.91H6.269z" transform="matrix(2.09535 0 0 2.09517 -1.144 -1.142)"/></svg>
Img file-text
<img class="svg-icon" src="assets/icons/file-text.svg" alt="file-text">
file-unknown
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-unknown</title>
    <use href="assets/sprites/fullSet.svg#file-unknown"></use>
</svg>
Inline
<svg id="file-unknown" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l3.43 3.43h-3.43v-3.43zm-3.737 6.32a6.22 6.22 0 00-1.783.242 7.656 7.656 0 00-1.512.628l.756 1.555a7.84 7.84 0 011.198-.5c.4-.123.8-.185 1.199-.185.39 0 .694.08.913.242a.79.79 0 01.342.685c0 .19-.033.366-.1.528a1.43 1.43 0 01-.342.486 5.841 5.841 0 01-.77.613c-.486.342-.814.68-.985 1.013-.171.324-.257.723-.257 1.198v.514h1.698v-.314c0-.2.029-.371.086-.514.067-.143.18-.29.342-.442a5.46 5.46 0 01.685-.556c.562-.4.98-.8 1.255-1.2.276-.399.414-.888.414-1.468 0-.77-.275-1.384-.827-1.84-.542-.457-1.313-.686-2.312-.686zm-.399 8.132c-.352 0-.647.09-.884.271-.238.18-.357.49-.357.928 0 .418.119.722.357.912.237.181.532.272.884.272.324 0 .604-.091.842-.272.247-.19.371-.494.371-.912 0-.438-.124-.747-.37-.928a1.352 1.352 0 00-.843-.271z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>
Img file-unknown
<img class="svg-icon" src="assets/icons/file-unknown.svg" alt="file-unknown">
file-video
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-video</title>
    <use href="assets/sprites/fullSet.svg#file-video"></use>
</svg>
Inline
<svg id="file-video" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.455.545v22.91h19.09V5.875l-5.33-5.33H2.455zm1.91 1.91h9.54v5.73h5.73v13.36H4.365V2.455zm11.45.39l1.714 1.716 1.715 1.714h-3.43v-3.43zm-.391 7.241l-1.51 1.515v-1.506H6.276v8.59h7.638V17.17l1.51 1.516h2.3v-8.6h-2.3zm-7.238 1.92h3.82v4.77h-3.82v-4.77zm7.628.392v3.973l-1.9-1.906v-.16l1.9-1.907z" transform="matrix(2.09535 0 0 2.09515 -1.144 -1.142)"/></svg>
Img file-video
<img class="svg-icon" src="assets/icons/file-video.svg" alt="file-video">
file-zip
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>file-zip</title>
    <use href="assets/sprites/fullSet.svg#file-zip"></use>
</svg>
Inline
<svg id="file-zip" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M4 0v48h40V9.174L34.824 0H4zm4.002 4.002h10.344a5.918 5.918 0 00-.35 2.002v10.004h12.008V6.004c0-.7-.125-1.375-.35-2.002h3.514l6.83 6.83v33.166H8.002V4.002zm15.998 0c1.129 0 2.002.873 2.002 2.002v6.002h-4.004V6.004c0-1.129.873-2.002 2.002-2.002z"/></svg>
Img file-zip
<img class="svg-icon" src="assets/icons/file-zip.svg" alt="file-zip">
filetype-doc
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>filetype-doc</title>
    <use href="assets/sprites/fullSet.svg#filetype-doc"></use>
</svg>
Inline
<svg version="1.1" id="filetype-doc" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.418.508v22.984h19.164V5.86L16.23.507H2.417zm1.984 1.984h9.465v5.73h5.731v3.008H4.402V2.492zm11.45.444l1.475 1.475 1.829 1.827h-3.304V2.936zm-3.73 9.388c.513 0 .933.1 1.264.304.336.198.583.48.742.847.159.362.238.788.238 1.277 0 .49-.08.92-.244 1.285a1.837 1.837 0 01-.736.848c-.33.203-.754.304-1.27.304-.512 0-.935-.101-1.27-.304a1.868 1.868 0 01-.742-.854c-.159-.366-.239-.795-.239-1.285 0-.486.08-.91.239-1.271a1.83 1.83 0 01.741-.847c.336-.203.761-.304 1.278-.304zm5.263.006c.234 0 .47.027.708.08.243.048.472.126.688.232l-.33.807a3.483 3.483 0 00-.51-.192 1.833 1.833 0 00-.57-.086c-.379 0-.678.143-.899.43-.216.283-.324.673-.324 1.172 0 .499.103.886.31 1.164.212.274.53.41.953.41.208 0 .406-.024.596-.072.194-.049.389-.11.583-.185v.86a3.285 3.285 0 01-1.29.239c-.504 0-.919-.1-1.245-.298a1.86 1.86 0 01-.722-.847c-.155-.366-.232-.792-.232-1.278 0-.476.089-.898.266-1.264.176-.366.434-.653.774-.86.34-.208.754-.312 1.244-.312zm-12.166.067H6.78c.741 0 1.319.196 1.734.589.419.388.628.953.628 1.694 0 .543-.1.995-.304 1.357a1.94 1.94 0 01-.86.814c-.37.18-.81.271-1.318.271H5.22v-4.725zm6.904.767c-.42 0-.724.142-.914.424-.185.282-.278.67-.278 1.164 0 .495.093.883.278 1.166.19.278.492.417.907.417.424 0 .725-.14.906-.417.186-.283.278-.671.278-1.166 0-.494-.092-.882-.278-1.164-.18-.282-.48-.424-.9-.424zm-5.892.06v3.065h.423c.954 0 1.43-.523 1.43-1.57 0-.507-.112-.882-.337-1.124-.225-.248-.556-.372-.993-.372H6.23zm-1.83 5.058h15.197v3.226H4.402v-3.226z" transform="matrix(2.02302 0 0 2.0884 -.276 -1.06)"/></svg>
Img filetype-doc
<img class="svg-icon" src="assets/icons/filetype-doc.svg" alt="filetype-doc">
filetype-docx
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>filetype-docx</title>
    <use href="assets/sprites/fullSet.svg#filetype-docx"></use>
</svg>
Inline
<svg version="1.1" id="filetype-docx" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.418.508v22.984h19.164V5.86L16.23.507H2.417zm1.984 1.984h9.465v5.73h5.731v3.008H4.402V2.492zm11.45.444l1.475 1.475 1.829 1.827h-3.304V2.936zm-6.037 9.388c.512 0 .934.1 1.265.304.335.198.583.48.741.847.16.362.239.788.239 1.277 0 .49-.082.92-.245 1.285a1.835 1.835 0 01-.735.848c-.331.203-.755.304-1.272.304-.511 0-.935-.101-1.27-.304a1.868 1.868 0 01-.742-.854c-.158-.366-.238-.795-.238-1.285 0-.486.08-.91.238-1.271a1.83 1.83 0 01.742-.847c.335-.203.76-.304 1.277-.304zm5.263.006c.234 0 .47.027.708.08.243.048.473.126.689.232l-.331.807a3.483 3.483 0 00-.51-.192 1.827 1.827 0 00-.569-.086c-.38 0-.68.143-.9.43-.217.283-.325.673-.325 1.172 0 .499.104.886.311 1.164.212.274.53.41.954.41.207 0 .406-.024.596-.072.194-.049.388-.11.582-.185v.86a3.285 3.285 0 01-1.291.239c-.503 0-.918-.1-1.245-.298a1.858 1.858 0 01-.72-.847c-.155-.366-.232-.792-.232-1.278 0-.476.088-.898.264-1.264a2.01 2.01 0 01.774-.86c.34-.208.755-.312 1.245-.312zm-12.167.067h1.562c.742 0 1.32.196 1.735.589.42.388.629.953.629 1.694 0 .543-.101.995-.304 1.357-.203.362-.49.633-.862.814-.37.18-.809.271-1.316.271H2.91v-4.725zm13.881 0h1.126l.973 1.615.953-1.615h1.132l-1.482 2.349 1.595 2.376h-1.166l-1.045-1.701-1.052 1.701H16.7l1.569-2.435-1.477-2.29zm-6.977.767c-.42 0-.723.142-.913.424-.185.282-.278.67-.278 1.164 0 .495.093.883.278 1.166.19.278.492.417.906.417.424 0 .727-.14.908-.417.185-.283.278-.671.278-1.166 0-.494-.093-.882-.278-1.164-.181-.282-.482-.424-.9-.424zm-5.891.06v3.065h.424c.953 0 1.43-.523 1.43-1.57 0-.507-.113-.882-.338-1.124-.225-.248-.556-.372-.993-.372h-.523zm.478 5.058h15.196v3.226H4.402v-3.226z" transform="matrix(2.02302 0 0 2.0884 -.276 -1.06)"/></svg>
Img filetype-docx
<img class="svg-icon" src="assets/icons/filetype-docx.svg" alt="filetype-docx">
filetype-pdf
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>filetype-pdf</title>
    <use href="assets/sprites/fullSet.svg#filetype-pdf"></use>
</svg>
Inline
<svg version="1.1" id="filetype-pdf" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.418.508v22.984h19.164V5.86L16.23.507H2.417zm1.984 1.984h9.465v5.73h5.731v3.008H4.402V2.492zm11.45.444l1.475 1.475 1.829 1.827h-3.304V2.936zm-9.7 9.46h1.482c.61 0 1.06.128 1.35.384.292.252.437.61.437 1.073 0 .278-.057.538-.172.78-.114.243-.306.44-.575.59-.265.15-.625.225-1.08.225h-.43v1.674H6.151v-4.725zm4.11 0h1.562c.742 0 1.32.197 1.735.59.42.388.629.953.629 1.694 0 .543-.101.995-.304 1.357-.203.362-.49.633-.862.814-.37.18-.809.271-1.316.271h-1.444v-4.725zm4.879 0h2.708v.82h-1.722v1.22h1.602v.82h-1.602v1.866h-.986v-4.725zm-7.977.827v1.39h.338c.278 0 .497-.054.656-.165.163-.11.244-.298.244-.563 0-.211-.066-.375-.198-.49-.128-.114-.329-.172-.603-.172h-.437zm4.11 0v3.066h.425c.953 0 1.43-.523 1.43-1.57 0-.507-.113-.882-.338-1.124-.225-.248-.556-.372-.993-.372h-.523zm-6.872 5.059h15.196v3.226H4.402v-3.226z" transform="matrix(2.02302 0 0 2.0884 -.276 -1.06)"/></svg>
Img filetype-pdf
<img class="svg-icon" src="assets/icons/filetype-pdf.svg" alt="filetype-pdf">
folder-block
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>folder-block</title>
    <use href="assets/sprites/fullSet.svg#folder-block"></use>
</svg>
Inline
<svg id="folder-block" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M4.365.545v5.73H.545v14.321a2.888 2.888 0 002.86 2.859h17.184c.69 0 1.393-.225 1.948-.719.555-.493.918-1.271.918-2.147V2.455h-6.324L15.26.545H4.366zm1.91 1.91h8.184l1.87 1.91h5.216V20.59c0 .398-.114.577-.275.72-.16.143-.413.235-.677.236a.951.951 0 01-.958-.956V6.276H6.275v-3.82zm-3.82 5.73h15.27v12.419c.002.331.056.648.152.94H3.414a.95.95 0 01-.959-.958v-12.4zm7.635 1.901c-2.626 0-4.776 2.147-4.776 4.773a4.79 4.79 0 004.776 4.776 4.79 4.79 0 004.776-4.776c0-2.626-2.15-4.773-4.776-4.773zm0 1.908c.445 0 .865.1 1.239.277l-3.825 3.833a2.88 2.88 0 01-.28-1.245 2.85 2.85 0 012.866-2.865zm2.589 1.629c.177.374.277.792.277 1.236a2.852 2.852 0 01-2.866 2.866 2.88 2.88 0 01-1.232-.274l3.82-3.828z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>
Img folder-block
<img class="svg-icon" src="assets/icons/folder-block.svg" alt="folder-block">
folder-broken
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>folder-broken</title>
    <use href="assets/sprites/fullSet.svg#folder-broken"></use>
</svg>
Inline
<svg id="folder-broken" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.004 0v12.006H0v13.062l.89.596-.001.002 7.103 4.742 6.012-4.002 5.969 4.002 6.037-4.006 5.994 4.006 7.103-4.742-.002-.002.891-.596V12.006h-27.99V4.002h17.146l3.916 4.002h10.93v33.992c0 .834-.238 1.208-.576 1.508-.33.293-.847.482-1.389.49a1.989 1.989 0 01-1.931-2.006V28.26l-3.184 2.127-.031-.05-4.832 3.227-5.951-3.959-.04.026-.05-.033-6.03 4.002h-.002l-5.97-4.002L7.996 33.6l-4.883-3.262L0 28.26v13.75c.017 3.28 2.71 5.973 5.99 5.99h36.006c1.445 0 2.917-.472 4.08-1.506C47.24 45.46 48 43.83 48 41.996V4.002H34.75L30.834 0zM4.002 16.008h31.992v6.922l-3.99 2.666-5.99-3.998-6.032 3.998-5.97-4.002-6.016 4.002-3.994-2.668zM14.004 34.41l5.963 3.994.006.004.968-.642 5.104-3.336 5.959 3.982.057-.037.05.033 3.883-2.594v6.182c0 .705.114 1.38.319 2.002H6.012a1.99 1.99 0 01-2.01-2.01v-6.244l3.99 2.664z"/></svg>
Img folder-broken
<img class="svg-icon" src="assets/icons/folder-broken.svg" alt="folder-broken">
folder-empty
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>folder-empty</title>
    <use href="assets/sprites/fullSet.svg#folder-empty"></use>
</svg>
Inline
<svg id="folder-empty" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M4.365.545v5.73H.545v14.321a2.888 2.888 0 002.86 2.859h17.184c.69 0 1.393-.225 1.948-.719.555-.493.918-1.271.918-2.147V2.455h-6.324L15.26.545H4.366zm1.91 1.91h8.184l1.87 1.91h5.216V20.59c0 .398-.114.577-.275.72-.16.143-.413.235-.677.236a.951.951 0 01-.958-.956V6.276H6.275v-3.82zm-3.82 5.73h15.27v12.419c.002.331.056.648.152.94H3.414a.95.95 0 01-.959-.958v-12.4z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>
Img folder-empty
<img class="svg-icon" src="assets/icons/folder-empty.svg" alt="folder-empty">
hardware-home-server
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>hardware-home-server</title>
    <use href="assets/sprites/fullSet.svg#hardware-home-server"></use>
</svg>
Inline
<svg version="1.1" id="hardware-home-server" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8 0c-.811 0-2.322.658-2.3 1.469V44H4c-.811 0-1.3 1.189-1.3 2 0 .811.489 2 1.3 2h39.7c.81 0 1.6-1.189 1.6-2 0-.811-.79-2-1.6-2H42V1.469C42 .657 40.51 0 39.7 0H8zm1.7 4H38v40H9.7V4zm4.505 2.209c-.811 0-1.47 1.538-1.47 2.35V31.23c0 .812.659 1.47 1.47 1.47h19.59a1.47 1.47 0 001.47-1.47V8.56c0-.812-.659-2.35-1.47-2.35h-19.59zm1.469 4h16.652v3.7H15.674v-3.7zm0 7.7h16.652v3.7H15.674v-3.7zm0 7.7h16.652v3.7H15.674v-3.7zM24 34.262a4.413 4.413 0 00-4.408 4.408A4.413 4.413 0 0024 43.078a4.413 4.413 0 004.408-4.408A4.413 4.413 0 0024 34.262zm0 2.94a1.47 1.47 0 11-.002 2.939A1.47 1.47 0 0124 37.2z"/></svg>
Img hardware-home-server
<img class="svg-icon" src="assets/icons/hardware-home-server.svg" alt="hardware-home-server">
hardware-saas
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>hardware-saas</title>
    <use href="assets/sprites/fullSet.svg#hardware-saas"></use>
</svg>
Inline
<svg version="1.1" id="hardware-saas" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M23.478 5.95l-.041.003c-4.895.2-9.332 2.95-11.688 7.246l-.25.453v.045c-.053.09-.052.05-.117.198v.003l-.006.004c-.609 1.388-.78 2.9-.975 4.397-5.818.82-10.394 5.643-10.39 11.68-.01.183-.012.367 0 .55C.3 36.934 5.61 42.02 12.022 42.027h5.915v-4.013h-5.915a8 8 0 01-8.005-7.676v-.027l-.004-.034a.803.803 0 010-.119l.008-.076V30a7.955 7.955 0 018.017-8.02l1.963.01.05-1.965a11.96 11.96 0 01.987-4.46c.079-.11.233-.316.346-.631a9.963 9.963 0 018.22-4.971h.338a10.026 10.026 0 019.967 10.021v6.036H38a5.969 5.969 0 015.984 6.013v.408a6.143 6.143 0 01-1.738 3.842 6.054 6.054 0 01-4.238 1.754h-12.04v-9.201l2.593 2.592 2.838-2.836-7.444-7.444-7.416 7.444 2.844 2.832 2.568-2.574v13.2h16.061a10.074 10.074 0 007.072-2.921l.008-.014.008-.008a10.162 10.162 0 002.894-6.38l.004-.075v-.615c.012-5.504-4.482-10.02-9.986-10.035h-.09v-2.033c-.026-7.68-6.266-13.953-13.945-14.02h-.008z"/></svg>
Img hardware-saas
<img class="svg-icon" src="assets/icons/hardware-saas.svg" alt="hardware-saas">
hardware-server
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>hardware-server</title>
    <use href="assets/sprites/fullSet.svg#hardware-server"></use>
</svg>
Inline
<svg version="1.1" id="hardware-server" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M2.068 0C.926 0 0 .866 0 1.934v12.173c.001 1.067.927 1.334 2.068 1.334h43.864c1.141 0 2.067-.267 2.068-1.334V1.934C48 .866 47.074 0 45.932 0H23.934zM4 4h40v7.441H4zm5.328.121a3.604 3.604 0 00-3.6 3.6c0 1.985 1.615 3.6 3.6 3.6s3.6-1.615 3.6-3.6-1.615-3.6-3.6-3.6zm0 1.6c1.103 0 2 .897 2 2s-.897 2-2 2c-1.102 0-2-.897-2-2s.898-2 2-2zm17.871 0a.8.8 0 00-.799.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.201 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm-11.2 2.4a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zM2.068 16.28C.926 16.28 0 17.145 0 18.213v12.174c.001 1.067.927 1.334 2.068 1.334h43.864c1.141 0 2.067-.267 2.068-1.334V18.213c0-1.068-.926-1.934-2.068-1.934H23.934zm1.932 4h40v7.442H4zm5.328.121a3.604 3.604 0 00-3.6 3.6c0 1.985 1.615 3.6 3.6 3.6s3.6-1.615 3.6-3.6-1.615-3.6-3.6-3.6zm0 1.6c1.103 0 2 .897 2 2s-.897 2-2 2c-1.102 0-2-.897-2-2s.898-2 2-2zM27.2 22a.8.8 0 00-.799.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.201 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm-11.2 2.4a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zM2.068 32.56C.926 32.559 0 33.424 0 34.492v12.174C.001 47.733.927 48 2.068 48h43.864c1.141 0 2.067-.267 2.068-1.334V34.492c0-1.068-.926-1.933-2.068-1.933H23.934zm1.932 4h40V44H4zm5.328.12a3.604 3.604 0 00-3.6 3.6c0 1.985 1.615 3.6 3.6 3.6s3.6-1.615 3.6-3.6-1.615-3.6-3.6-3.6zm0 1.6c1.103 0 2 .897 2 2s-.897 2-2 2c-1.102 0-2-.897-2-2s.898-2 2-2zm17.871 0a.8.8 0 00-.799.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.201 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm-11.2 2.4a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8zm3.2 0a.8.8 0 00-.8.8.8.8 0 00.8.8.8.8 0 00.8-.8.8.8 0 00-.8-.8z"/></svg>
Img hardware-server
<img class="svg-icon" src="assets/icons/hardware-server.svg" alt="hardware-server">
logo-docker
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>logo-docker</title>
    <use href="assets/sprites/fullSet.svg#logo-docker"></use>
</svg>
Inline
<svg version="1.1" id="logo-docker" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M37.026 13.608l.45-.681.786.477.348.249c.84.648 2.607 2.304 2.988 5.052a11.43 11.43 0 012.019-.18c1.602 0 2.679.372 3.291.68l.315.172.204.135.573.468-.198.6a6.132 6.132 0 01-1.41 2.19c-.87.897-2.4 1.956-4.827 2.094l-.534.015h-.444c-1.11 2.931-2.601 6.234-5.106 9.198a21.243 21.243 0 01-5.22 4.464 23.823 23.823 0 01-7.647 2.904 30.263 30.263 0 01-5.86.555c-4.35 0-8.19-.864-10.55-2.376-2.11-1.347-3.73-3.546-4.819-6.53a24.75 24.75 0 01-1.383-8.491 1.548 1.548 0 011.296-1.548l.204-.015h31.62l.277-.021.447-.048c.768-.102 1.938-.33 2.76-.81-.984-1.63-1.263-3.534-.804-5.562a9.9 9.9 0 01.9-2.43zM8.669 17.352l.12.02a.381.381 0 01.231.247l.018.12v3.945l-.018.123a.381.381 0 01-.234.246l-.117.018H4.433a.372.372 0 01-.35-.264l-.022-.12v-3.951l.021-.12a.381.381 0 01.234-.25l.117-.017H8.67zm5.841 0l.117.02a.381.381 0 01.234.247l.018.12v3.945l-.02.123a.381.381 0 01-.235.246l-.117.018h-4.236a.375.375 0 01-.35-.264l-.022-.117v-3.951a.39.39 0 01.255-.37l.117-.02h4.24zm5.929 0l.117.02a.381.381 0 01.23.247l.022.12v3.945l-.021.123a.381.381 0 01-.234.246l-.117.018h-4.237a.372.372 0 01-.35-.264l-.019-.12v-3.951l.018-.12a.381.381 0 01.234-.25l.117-.017h4.24zm5.856 0l.117.02a.381.381 0 01.234.247l.02.12v3.945a.39.39 0 01-.254.369l-.12.018h-4.233a.372.372 0 01-.351-.264l-.018-.12v-3.951l.018-.12a.381.381 0 01.234-.25l.12-.017h4.236zm5.91 0l.117.02a.381.381 0 01.234.247l.018.12v3.945a.39.39 0 01-.255.369l-.117.018h-4.236a.372.372 0 01-.351-.264l-.018-.12v-3.951l.018-.12a.381.381 0 01.234-.25l.12-.017h4.233zm-17.7-5.676l.12.02a.381.381 0 01.23.244l.021.123v3.945a.39.39 0 01-.255.369l-.117.02h-4.233a.375.375 0 01-.35-.27l-.022-.12v-3.944a.39.39 0 01.255-.366l.117-.021h4.236zm5.928 0l.12.02a.381.381 0 01.23.244l.022.123v3.945a.39.39 0 01-.255.369l-.117.02h-4.234a.375.375 0 01-.35-.27l-.019-.12v-3.944l.018-.12a.381.381 0 01.234-.246l.117-.021h4.237zm5.859 0c.162 0 .3.11.35.264l.022.123v3.945a.39.39 0 01-.255.369l-.12.02h-4.23a.375.375 0 01-.351-.27l-.018-.12v-3.944l.018-.12a.381.381 0 01.234-.246l.12-.021h4.236zm0-5.676c.162 0 .3.11.35.264l.022.12v3.948a.39.39 0 01-.255.369l-.12.018h-4.23a.372.372 0 01-.351-.264l-.018-.12V6.384l.018-.12a.381.381 0 01.234-.246L22.059 6h4.236z"/></svg>
Img logo-docker
<img class="svg-icon" src="assets/icons/logo-docker.svg" alt="logo-docker">
logo-qemu
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>logo-qemu</title>
    <use href="assets/sprites/fullSet.svg#logo-qemu"></use>
</svg>
Inline
<svg version="1.1" id="logo-qemu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24.006 0C10.752 0 0 10.743 0 24s10.752 24 24.006 24c4.338 0 8.4-1.146 11.91-3.157L37.164 48h9.682l-3.786-9.408A23.69 23.817 0 0048 24C48 10.743 37.26 0 24.006 0zm-6.37 3.953c.796.682.648.398 1.72.27 1.22-.799 1.786 1.894 2.294.392 1.496.195 3.084.683 4.5 1.174a6.894 6.931 0 013.718 2.268l-.028.014.7.931c.09.16.164.33.24.499.284 2.423 2.96 2.392 4.754 3.267 1.534.547 3.38 1.38 3.57 3.24-.386-.085-1.882-1.853-3.06-2.025a7.838 7.88 0 01-2.188-.513l-4.136-.77v-.014a6.07 6.103 0 01-.618-.107v.026l-5.854-.728c.096.067.2.155.296.242l6 1.176v-.014l.418.106 1.678.378c.332.033.668.087.94.135 1.712.475 3.736.39 5.142 1.593-.368.707-2.42.307-3.438.217-.124-.024-.262-.046-.388-.069l-.068-.014c-1.392-.227-2.822-.241-4.162.177h-.014a6.386 6.42 0 00-1.342.608c-1.936 1.132-4.328 1.542-5.934 3.17-1.574 1.704-1.478 4.046-1.208 6.224h.066v.553c.026.19.056.382.08.567.82 4.403 3 8.445 3.68 12.892.13 1.695.406 3.885.618 5.264-.612-.183-.95-2.94-1.088-2.024a76.392 76.802 0 00-7.13-10.557C15.688 30.483 14 28.36 11.97 26.682c-1.37-1.061-.936-3.116-1.074-4.628-.46-1.862-.188-3.716.12-5.576.626-1.936.836-3.957 1.692-5.817 1.306-1.168 1.338-3.278 2.606-4.293.188.117.314.17.4.201l.136.016h.014c.18-.19-1.776-2.244.04-1.432.07-1.08 1.708-.257 1.732-1.2zM25.33 8.34c-.646.019-1.148.262-1.29.674-.228.664.546 1.518 1.732 1.93 1.188.413 2.336.22 2.564-.444.228-.664-.544-1.532-1.732-1.944a3.684 3.704 0 00-1.274-.216z"/></svg>
Img logo-qemu
<img class="svg-icon" src="assets/icons/logo-qemu.svg" alt="logo-qemu">
ui-arrow-down-circle
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-arrow-down-circle</title>
    <use href="assets/sprites/fullSet.svg#ui-arrow-down-circle"></use>
</svg>
Inline
<svg version="1.1" id="ui-arrow-down-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.056.498a8 8 0 100 16.001 8 8 0 000-16zm0 1.334c3.59 0 6.667 3.077 6.667 6.666 0 3.59-3.077 6.667-6.666 6.667-3.59 0-6.667-3.077-6.667-6.666 0-3.59 3.077-6.667 6.666-6.667zm-.069 2.665c-.328.005-.658.26-.67.76l.079 5.192L5.71 8.826c-.74-.673-1.637.313-.897.986l2.75 2.5a.749.749 0 001.01-.015l1.374-1.292 1.374-1.29c.74-.674-.156-1.633-.896-.96l-.848.82-.848.854-.078-5.192c-.008-.5-.335-.745-.664-.74z" transform="rotate(.862 123.442 13.497) scale(3)"/></svg>
Img ui-arrow-down-circle
<img class="svg-icon" src="assets/icons/ui-arrow-down-circle.svg" alt="ui-arrow-down-circle">
ui-arrow-down
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-arrow-down</title>
    <use href="assets/sprites/fullSet.svg#ui-arrow-down"></use>
</svg>
Inline
<svg version="1.1" id="ui-arrow-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M26 3c0-4-4.006-4-4 0v37.7L7.768 26.351c-2.75-2.789-5.577-.194-2.948 2.709 5.703 6.027 11.474 11.976 17.18 18 .595.586 1.277.953 2 .94.77-.01 1.432-.364 2-.94l17.18-18c2.63-2.903-.199-5.498-2.948-2.708L26 40.7z"/></svg>
Img ui-arrow-down
<img class="svg-icon" src="assets/icons/ui-arrow-down.svg" alt="ui-arrow-down">
ui-arrow-left-circle
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-arrow-left-circle</title>
    <use href="assets/sprites/fullSet.svg#ui-arrow-left-circle"></use>
</svg>
Inline
<svg version="1.1" id="ui-arrow-left-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.056.498a8 8 0 100 16.001 8 8 0 000-16zm0 1.334c3.59 0 6.667 3.077 6.667 6.666 0 3.59-3.077 6.667-6.666 6.667-3.59 0-6.667-3.077-6.667-6.666 0-3.59 3.077-6.667 6.666-6.667zm-.78 3.147c-.177.008-.365.09-.533.276l-2.5 2.75a.749.749 0 00.015 1.01l1.291 1.374 1.291 1.374c.674.74 1.633-.156.96-.896l-.82-.848-.854-.848 5.192-.078c1-.015.98-1.31-.02-1.334l-5.192.079 1.623-1.686c.505-.555.076-1.199-.453-1.173z" transform="rotate(.862 123.442 13.497) scale(3)"/></svg>
Img ui-arrow-left-circle
<img class="svg-icon" src="assets/icons/ui-arrow-left-circle.svg" alt="ui-arrow-left-circle">
ui-arrow-left
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-arrow-left</title>
    <use href="assets/sprites/fullSet.svg#ui-arrow-left"></use>
</svg>
Inline
<svg version="1.1" id="ui-arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M45 26c4 0 4-4.006 0-4H7.3L21.649 7.768c2.789-2.75.194-5.577-2.709-2.948C12.913 10.523 6.964 16.294.94 22c-.586.595-.953 1.277-.94 2 .01.77.364 1.432.94 2l18 17.18c2.903 2.63 5.498-.199 2.708-2.948L7.3 26z"/></svg>
Img ui-arrow-left
<img class="svg-icon" src="assets/icons/ui-arrow-left.svg" alt="ui-arrow-left">
ui-arrow-right-circle
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-arrow-right-circle</title>
    <use href="assets/sprites/fullSet.svg#ui-arrow-right-circle"></use>
</svg>
Inline
<svg version="1.1" id="ui-arrow-right-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.056.498a8 8 0 100 16.001 8 8 0 000-16zm0 1.334c3.59 0 6.667 3.077 6.667 6.666 0 3.59-3.077 6.667-6.666 6.667-3.59 0-6.667-3.077-6.667-6.666 0-3.59 3.077-6.667 6.666-6.667zm.675 3.125c-.53-.01-.939.647-.418 1.186L9.987 7.78l-5.193.078c-.998.053-.98 1.349.02 1.334l5.193-.079-.828.874-.795.872c-.65.76.335 1.627.986.867l1.25-1.413L11.868 8.9a.749.749 0 00-.015-1.01L9.272 5.217c-.174-.18-.364-.257-.54-.26z" transform="rotate(.862 123.442 13.497) scale(3)"/></svg>
Img ui-arrow-right-circle
<img class="svg-icon" src="assets/icons/ui-arrow-right-circle.svg" alt="ui-arrow-right-circle">
ui-arrow-right
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-arrow-right</title>
    <use href="assets/sprites/fullSet.svg#ui-arrow-right"></use>
</svg>
Inline
<svg version="1.1" id="ui-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M3 22c-4 0-4 4.006 0 4h37.7L26.351 40.232c-2.789 2.75-.194 5.577 2.709 2.948 6.027-5.703 11.976-11.474 18-17.18.586-.595.953-1.277.94-2-.01-.77-.364-1.432-.94-2l-18-17.18c-2.903-2.63-5.498.199-2.708 2.948L40.7 22z"/></svg>
Img ui-arrow-right
<img class="svg-icon" src="assets/icons/ui-arrow-right.svg" alt="ui-arrow-right">
ui-arrow-top-circle
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-arrow-top-circle</title>
    <use href="assets/sprites/fullSet.svg#ui-arrow-top-circle"></use>
</svg>
Inline
<svg version="1.1" id="ui-arrow-top-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M8.056.498a8 8 0 100 16.001 8 8 0 000-16zm0 1.334c3.59 0 6.667 3.077 6.667 6.666 0 3.59-3.077 6.667-6.666 6.667-3.59 0-6.667-3.077-6.667-6.666 0-3.59 3.077-6.667 6.666-6.667zm-.109 2.666a.722.722 0 00-.5.203L4.776 7.283c-.72.695.207 1.654.926.959l1.636-1.674.078 5.192c.053.999 1.349.98 1.334-.02l-.08-5.192.874.828.872.795c.76.65 1.627-.335.867-.986L9.87 5.935 8.458 4.687a.773.773 0 00-.51-.188z" transform="rotate(.862 123.442 13.497) scale(3)"/></svg>
Img ui-arrow-top-circle
<img class="svg-icon" src="assets/icons/ui-arrow-top-circle.svg" alt="ui-arrow-top-circle">
ui-arrow-up
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-arrow-up</title>
    <use href="assets/sprites/fullSet.svg#ui-arrow-up"></use>
</svg>
Inline
<svg version="1.1" id="ui-arrow-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M22 45c0 4 4.006 4 4 0V7.3l14.232 14.349c2.75 2.789 5.577.194 2.948-2.709C37.477 12.913 31.706 6.964 26 .94c-.595-.586-1.277-.953-2-.94-.77.01-1.432.364-2 .94l-17.18 18c-2.63 2.903.199 5.498 2.948 2.708L22 7.3z"/></svg>
Img ui-arrow-up
<img class="svg-icon" src="assets/icons/ui-arrow-up.svg" alt="ui-arrow-up">
ui-camera
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-camera</title>
    <use href="assets/sprites/fullSet.svg#ui-camera"></use>
</svg>
Inline
<svg viewBox="0 -2 48 48" version="1.1" id="ui-camera" xmlns="http://www.w3.org/2000/svg"><path d="M273 468c-1.656 0-2.205 1.431-3 3l-1.5 3H264a6 6 0 00-6 6v24a6 6 0 006 6h36a6 6 0 006-6v-24a6 6 0 00-6-6h-4.5l-1.5-3c-.884-1.745-1.344-3-3-3h-18zm9 11.877a12.165 12.165 0 0112.166 12.164A12.165 12.165 0 01282 504.207a12.165 12.165 0 01-12.166-12.166A12.165 12.165 0 01282 479.877zm0 3.924a8.165 8.165 0 00-8.164 8.164A8.165 8.165 0 00282 500.13a8.165 8.165 0 008.164-8.166A8.165 8.165 0 00282 483.8z" transform="translate(-258 -467)"/></svg>
Img ui-camera
<img class="svg-icon" src="assets/icons/ui-camera.svg" alt="ui-camera">
ui-cancel
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-cancel</title>
    <use href="assets/sprites/fullSet.svg#ui-cancel"></use>
</svg>
Inline
<svg id="ui-cancel" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12 .545C5.685.545.545 5.685.545 12S5.685 23.455 12 23.455 23.455 18.315 23.455 12 18.315.545 12 .545zm0 1.91c2.297 0 4.4.806 6.044 2.15L4.606 18.046A9.511 9.511 0 012.456 12 9.53 9.53 0 0112 2.455zm7.394 3.5A9.511 9.511 0 0121.544 12 9.53 9.53 0 0112 21.545c-2.297 0-4.4-.806-6.044-2.15l13.438-13.44z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>
Img ui-cancel
<img class="svg-icon" src="assets/icons/ui-cancel.svg" alt="ui-cancel">
ui-check-with-border
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-check-with-border</title>
    <use href="assets/sprites/fullSet.svg#ui-check-with-border"></use>
</svg>
Inline
<svg version="1.1" id="ui-check-with-border" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M5.334 0C2.401 0 0 2.4 0 5.334v37.332C0 45.599 2.4 48 5.334 48h37.332C45.599 48 48 46.933 48 44V21.334h-4V44H4V4h28V0H5.334zM44.09 5.242L21.184 28.158l-8.075-8.07-2.828 2.828 10.903 10.898L46.92 8.07l-2.83-2.828z"/></svg>
Img ui-check-with-border
<img class="svg-icon" src="assets/icons/ui-check-with-border.svg" alt="ui-check-with-border">
ui-check
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-check</title>
    <use href="assets/sprites/fullSet.svg#ui-check"></use>
</svg>
Inline
<svg version="1.1" id="ui-check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M47.35 10.973c2.28-2.411-.363-5.093-2.807-2.849L16.121 36.13 3.471 23.292c-2.412-2.28-5.094.364-2.85 2.808l13.65 13.852a2.578 2.578 0 003.644.026z"/></svg>
Img ui-check
<img class="svg-icon" src="assets/icons/ui-check.svg" alt="ui-check">
ui-chevron-down
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-chevron-down</title>
    <use href="assets/sprites/fullSet.svg#ui-chevron-down"></use>
</svg>
Inline
<svg version="1.1" id="ui-chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-.304 30.41l175.66 175.116 175.117-175.66-20.666-20.602-154.514 154.994L20.298 9.744z" transform="translate(.05 9.243) scale(.13685)"/></svg>
Img ui-chevron-down
<img class="svg-icon" src="assets/icons/ui-chevron-down.svg" alt="ui-chevron-down">
ui-chevron-left
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-chevron-left</title>
    <use href="assets/sprites/fullSet.svg#ui-chevron-left"></use>
</svg>
Inline
<svg version="1.1" id="ui-chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-80.912-122.112l23.978-24.104 24.105 23.979-2.821 2.835-21.269-21.157-21.158 21.268z" transform="rotate(-89.881 62.04 -94.76) scale(.99832)"/></svg>
Img ui-chevron-left
<img class="svg-icon" src="assets/icons/ui-chevron-left.svg" alt="ui-chevron-left">
ui-chevron-right
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-chevron-right</title>
    <use href="assets/sprites/fullSet.svg#ui-chevron-right"></use>
</svg>
Inline
<svg version="1.1" id="ui-chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-80.912-122.112l23.978-24.104 24.105 23.979-2.821 2.835-21.269-21.157-21.158 21.268z" transform="scale(-.99832 .99832) rotate(-89.881 38.105 -70.828)"/></svg>
Img ui-chevron-right
<img class="svg-icon" src="assets/icons/ui-chevron-right.svg" alt="ui-chevron-right">
ui-chevron-up
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-chevron-up</title>
    <use href="assets/sprites/fullSet.svg#ui-chevron-up"></use>
</svg>
Inline
<svg version="1.1" id="ui-chevron-up" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-80.912-122.112l23.978-24.104 24.105 23.979-2.821 2.835-21.269-21.157-21.158 21.268z" transform="translate(80.521 156.67) scale(.99831)"/></svg>
Img ui-chevron-up
<img class="svg-icon" src="assets/icons/ui-chevron-up.svg" alt="ui-chevron-up">
ui-clock
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-clock</title>
    <use href="assets/sprites/fullSet.svg#ui-clock"></use>
</svg>
Inline
<svg id="ui-clock" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M12 .545C5.685.545.545 5.685.545 12S5.685 23.455 12 23.455 23.455 18.315 23.455 12 18.315.545 12 .545zm0 1.91A9.53 9.53 0 0121.545 12a9.53 9.53 0 01-10.523 9.495 9.53 9.53 0 01-8.555-9.988A9.529 9.529 0 0112 2.456zm-.956 1.905v5.998A1.915 1.915 0 0010.095 12 1.92 1.92 0 0012 13.905c.169 0 .333-.023.49-.066l3.603 3.606 1.352-1.352-3.606-3.604c.043-.156.066-.32.066-.489 0-.694-.385-1.309-.95-1.642V4.36h-1.91z" transform="translate(-1.142 -1.142) scale(2.09516)"/></svg>
Img ui-clock
<img class="svg-icon" src="assets/icons/ui-clock.svg" alt="ui-clock">
ui-earth
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-earth</title>
    <use href="assets/sprites/fullSet.svg#ui-earth"></use>
</svg>
Inline
<svg version="1.1" id="ui-earth" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M213.333 0c-10.177 0-20.168.757-29.965 2.135a213.333 213.333 0 00-.66.087 212.03 212.03 0 00-29.479 6.424 211.71 211.71 0 00-28.177 10.486 213.333 213.333 0 00-.642.295 212.819 212.819 0 00-26.025 14.236 213.333 213.333 0 00-.729.469 213.938 213.938 0 00-23.298 17.43 213.333 213.333 0 00-1.372 1.181 214.677 214.677 0 00-20.243 20.243 213.333 213.333 0 00-1.18 1.372 213.938 213.938 0 00-17.431 23.298 213.333 213.333 0 00-.469.73 212.819 212.819 0 00-14.236 26.024 213.333 213.333 0 00-.295.642A211.71 211.71 0 008.646 153.23a212.03 212.03 0 00-6.424 29.48 213.333 213.333 0 00-.087.66C.757 193.164 0 203.155 0 213.332c0 10.178.757 20.168 2.135 29.966a213.333 213.333 0 00.087.66 212.03 212.03 0 006.424 29.478 211.71 211.71 0 0010.486 28.178 213.333 213.333 0 00.295.642 212.818 212.818 0 0014.236 26.024 213.333 213.333 0 00.469.73 213.938 213.938 0 0017.43 23.298 213.333 213.333 0 001.181 1.372 214.677 214.677 0 0020.243 20.243 213.333 213.333 0 001.372 1.18 213.938 213.938 0 0023.298 17.43 213.333 213.333 0 00.73.47 212.818 212.818 0 0026.024 14.236 213.333 213.333 0 00.642.295 211.71 211.71 0 0028.177 10.486 212.03 212.03 0 0029.48 6.423 213.333 213.333 0 00.66.087c9.796 1.378 19.787 2.136 29.964 2.136 10.178 0 20.168-.758 29.966-2.136a213.333 213.333 0 00.66-.087 212.03 212.03 0 0029.478-6.423 211.71 211.71 0 0028.178-10.486 213.333 213.333 0 00.642-.295 212.817 212.817 0 0026.024-14.237 213.333 213.333 0 00.73-.468 213.938 213.938 0 0023.298-17.43 213.333 213.333 0 001.372-1.181 214.677 214.677 0 0020.243-20.243 213.333 213.333 0 001.18-1.372 213.938 213.938 0 0017.43-23.299 213.333 213.333 0 00.47-.729 212.817 212.817 0 0014.236-26.024 213.333 213.333 0 00.295-.642 211.71 211.71 0 0010.486-28.178 212.03 212.03 0 006.423-29.479 213.333 213.333 0 00.087-.66c1.378-9.797 2.136-19.787 2.136-29.965 0-3.513-.093-6.997-.26-10.468a213.333 213.333 0 000-.105 215.47 215.47 0 00-.713-9.635c-.021-.23-.03-.464-.052-.694a213.333 213.333 0 000-.035c-.308-3.166-.717-6.304-1.163-9.427-.044-.311-.076-.627-.121-.938a213.333 213.333 0 00-.018-.104 212.44 212.44 0 00-1.77-10.208 212.18 212.18 0 00-2.292-10.226 211.814 211.814 0 00-18.802-48.733 213.236 213.236 0 00-5.157-9.097 213.234 213.234 0 00-5.173-8.16c-.151-.227-.282-.467-.434-.694a213.333 213.333 0 00-.07-.104 213.712 213.712 0 00-5.33-7.552c-.216-.295-.406-.61-.625-.903a213.333 213.333 0 00-.052-.07c-1.688-2.27-3.45-4.483-5.225-6.683-.396-.491-.763-1.006-1.163-1.494a213.333 213.333 0 00-.087-.104c-1.688-2.05-3.447-4.038-5.209-6.024-.525-.593-1.013-1.219-1.545-1.806a213.333 213.333 0 00-.156-.173 214.852 214.852 0 00-14.653-14.636 213.333 213.333 0 00-1.805-1.545c-1.986-1.761-3.974-3.52-6.025-5.208l-.104-.087a213.333 213.333 0 00-1.493-1.163c-2.2-1.776-4.413-3.537-6.684-5.226l-.07-.052a213.333 213.333 0 00-.902-.625 213.722 213.722 0 00-7.552-5.33l-.104-.07a213.333 213.333 0 00-.695-.433 213.235 213.235 0 00-8.16-5.174 213.25 213.25 0 00-9.097-5.156 211.814 211.814 0 00-48.732-18.802 212.178 212.178 0 00-10.226-2.292 212.445 212.445 0 00-10.208-1.77l-.105-.018a213.333 213.333 0 00-.937-.122c-3.123-.445-6.262-.854-9.427-1.163h-.035a213.333 213.333 0 00-.694-.052c-3.195-.3-6.402-.554-9.636-.712-.034-.001-.07.002-.104 0A213.333 213.333 0 00213.333 0zm1.51 17.813a195.556 195.556 0 01146.615 67.934l-66.927-15.99-28.889 57.76 25.799 64.48h31.285l61.267 115.954a195.556 195.556 0 01-170.66 100.938 195.556 195.556 0 01-19.6-1.545c-.795-1.108-2.285-2.5-5.105-4.34l57.066-113.212-12.447-87.118h-71.181l-60.556-24.22-16.684 33.386 12.014 60.087 41.823 41.823 16.736 86.18A195.556 195.556 0 0117.778 213.334 195.556 195.556 0 0139.01 124.74l67.657 45.92 96.007-79.618V42.986c2.708-.167 8.15-17.211 12.17-25.173zm-81.475 44.722l37.274 12.135v1.337l-66.857 55.469-12.17-6.007 41.753-62.934zm173.576 53.94l36.997 24.688 23.82 85.886L346.544 160h-33.437l-12.414-31.042 6.25-12.482zM119.062 219.932l36.84 14.74 49.584-.018 7.118 49.757-33.785 67.57h-8.16v-51.494l-44.34-44.358-7.257-36.197z" transform="scale(.1125)"/></svg>
Img ui-earth
<img class="svg-icon" src="assets/icons/ui-earth.svg" alt="ui-earth">
ui-edit
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-edit</title>
    <use href="assets/sprites/fullSet.svg#ui-edit"></use>
</svg>
Inline
<svg id="ui-edit" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M19.8.545a3.646 3.646 0 00-2.585 1.07L7.3 11.53l-1.288 6.458L12.47 16.7l9.914-9.914a3.646 3.646 0 001.07-2.586A3.668 3.668 0 0019.803.545H19.8zM.546 2.455v21h21V12h-1.91v9.545H2.455V4.365h10.506v-1.91H.545zm19.254 0h.002c.975 0 1.744.77 1.744 1.744v.002c0 .463-.183.906-.51 1.233l-9.506 9.505-3.084.616.616-3.084 9.505-9.506c.327-.327.77-.51 1.233-.51z" transform="translate(-1.142 -1.142) scale(2.09515)"/></svg>
Img ui-edit
<img class="svg-icon" src="assets/icons/ui-edit.svg" alt="ui-edit">
ui-external-link
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-external-link</title>
    <use href="assets/sprites/fullSet.svg#ui-external-link"></use>
</svg>
Inline
<svg version="1.1" id="ui-external-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M45.42 0L29.992.008a2.571 2.571 0 00-2.57 2.572c0 1.42 1.153 1.477 2.572 1.428l11.572-.404L17.9 26.482c-2.255 2.423.426 5.07 2.846 2.813L44.43 6.398 44 18c.002 3.429 4.002 3.427 4-.002L47.992 2.57c0-.68-.268-1.33-.748-1.812l-.008-.004-.002-.008A2.567 2.567 0 0045.42 0zM7.715 6.857A7.715 7.715 0 000 14.572v25.713A7.715 7.715 0 007.715 48h25.713a7.715 7.715 0 007.715-7.715V26.572c0-3.428-4-3.428-4 0v13.713c0 1.42-2.295 3.715-3.715 3.715H7.715C6.295 44 4 41.705 4 40.285V14.572c0-1.42 2.295-3.715 3.715-3.715h13.713c3.428 0 3.428-4 0-4z"/></svg>
Img ui-external-link
<img class="svg-icon" src="assets/icons/ui-external-link.svg" alt="ui-external-link">
ui-feed
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-feed</title>
    <use href="assets/sprites/fullSet.svg#ui-feed"></use>
</svg>
Inline
<svg version="1.1" id="ui-feed" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M2.75 1c-1 0-1 1.083 0 1.083 5.937 0 11.167 5.23 11.167 11.167 0 1 1.083 1 1.083 0C15 6.485 9.515 1 2.75 1zm0 5.417c-1 0-1 1.083 0 1.083a5.75 5.75 0 015.75 5.75c0 1 1.083 1 1.083 0 0-4.004-2.829-6.833-6.833-6.833zM3.5 11c-2 0-2 3 0 3s2-3 0-3z" transform="translate(-7.385 -3.692) scale(3.6923)"/></svg>
Img ui-feed
<img class="svg-icon" src="assets/icons/ui-feed.svg" alt="ui-feed">
ui-light-dark
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-light-dark</title>
    <use href="assets/sprites/fullSet.svg#ui-light-dark"></use>
</svg>
Inline
<svg id="ui-light-dark" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M24 0C10.769 0 0 10.769 0 24s10.769 24 24 24c12.235 0 22.356-9.21 23.813-21.059.118-.964.187-1.945.187-2.941 0-.965-.064-1.916-.176-2.852a24 24 0 00-.023-.185 23.84 23.84 0 00-.524-2.8 23.767 23.767 0 00-.869-2.743 24 24 0 00-.056-.145 23.909 23.909 0 00-1.157-2.515 24 24 0 00-.066-.127 24.025 24.025 0 00-1.412-2.291 24 24 0 00-.254-.356 24.15 24.15 0 00-1.557-1.941 24 24 0 00-.304-.336 24.251 24.251 0 00-1.774-1.727 24 24 0 00-.35-.3 24.137 24.137 0 00-2.11-1.602 24 24 0 00-.179-.115 24.01 24.01 0 00-2.36-1.371 24 24 0 00-.071-.041 24 24 0 00-.004.002A23.841 23.841 0 0024 0zm0 4c2.355 0 4.611.408 6.707 1.15A24 24 0 0021.434 24a24 24 0 009.277 18.85A20.038 20.038 0 0124 44C12.93 44 4 35.07 4 24S12.93 4 24 4z"/></svg>
Img ui-light-dark
<img class="svg-icon" src="assets/icons/ui-light-dark.svg" alt="ui-light-dark">
ui-link
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-link</title>
    <use href="assets/sprites/fullSet.svg#ui-link"></use>
</svg>
Inline
<svg version="1.1" id="ui-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M33.988.003c-2.956.06-6.031 1.2-8.852 3.806l-3.812 3.664c-2.317 2.389.316 5.107 2.797 2.887l3.762-3.615c3.964-3.725 9.94-3.005 13.2.336 3.262 3.34 3.808 9.303-.072 13.115l-6.554 6.41c-3.624 3.484-11.165 2.853-14.117-1.207-2.004-2.921-5.59-.546-3.424 2.257a13.49 13.49 0 009.724 5.495h.002a13.524 13.524 0 0010.553-3.71l6.629-6.374.035-.033c6.209-6.202 4.75-13.988.129-18.733-2.6-2.669-6.2-4.376-10-4.298zM20.263 14.684a13.51 13.51 0 00-9.75 3.932l-6.51 6.496-.033.033c-6.092 6.314-4.491 14.07.217 18.73 4.709 4.66 12.525 6.223 18.86.148l3.742-3.732c2.272-2.43-.41-5.101-2.85-2.836l-3.693 3.684c-3.895 3.796-9.885 3.185-13.207-.096-3.323-3.28-3.978-9.231-.17-13.113l6.433-6.53c3.558-3.549 11.111-3.056 14.14.95 2.056 2.884 5.596.443 3.378-2.32a13.489 13.489 0 00-9.822-5.315h-.004a13.601 13.601 0 00-.73-.031z"/></svg>
Img ui-link
<img class="svg-icon" src="assets/icons/ui-link.svg" alt="ui-link">
ui-logout
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-logout</title>
    <use href="assets/sprites/fullSet.svg#ui-logout"></use>
</svg>
Inline
<svg version="1.1" id="ui-logout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M-85.333-42.667v48h40v-10h-4v6h-32v-40h32v6h4v-10h-40zm36 12.614l-3 3.394 6.5 5.992h-24.5v4h24.5l-6.5 5.813 3 3.394 12.017-11.297-12.017-11.296z" transform="translate(85.333 42.667)"/></svg>
Img ui-logout
<img class="svg-icon" src="assets/icons/ui-logout.svg" alt="ui-logout">
ui-note
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-note</title>
    <use href="assets/sprites/fullSet.svg#ui-note"></use>
</svg>
Inline
<svg version="1.1" id="ui-note" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0v384h260.219L384 260.219V0H0zm32 32h320v181.594H213.594V352H32V32zm213.594 213.594H352L245.594 352V245.594z" transform="scale(.125)"/></svg>
Img ui-note
<img class="svg-icon" src="assets/icons/ui-note.svg" alt="ui-note">
ui-pin
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-pin</title>
    <use href="assets/sprites/fullSet.svg#ui-pin"></use>
</svg>
Inline
<svg id="ui-pin" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M18.832 0a4.826 4.826 0 00-1.764.323 5.143 5.143 0 00-2.59 1.953 5.266 5.266 0 00-.933 2.947c-.001 1.48.88 2.828 2.123 3.846l-.043 8.37c-.67.464-1.368.89-1.944 1.47a14.472 14.472 0 00-4.289 10.313l.006 2.08 12.637.006L22.96 48h2.064l.94-16.69 12.637.006.008-2.08A14.48 14.48 0 0034.38 18.97c-.587-.6-1.307-1.038-1.994-1.516l-.03-8.377c1.243-1.017 2.12-2.365 2.12-3.844 0-2.021-1.286-4.137-3.516-4.903a4.844 4.844 0 00-1.74-.326h-.012zm-.041 4.168l10.44.004h.011a.679.679 0 01.256.05l.055.02.055.02c.578.193.697.526.697.969 0 .443-.123.779-.701.97l-1.432.475.049 13.016 1.068.592c.78.433 1.496.976 2.12 1.614l.005.005.01.01c1.428 1.43 2.199 3.281 2.604 5.229l-20.048-.008c.41-1.965 1.191-3.832 2.64-5.266l.009-.007.006-.006a9.231 9.231 0 012.084-1.575l1.068-.591.06-13.017-1.431-.476c-.578-.193-.7-.528-.7-.97 0-.444.124-.78.702-.972l.05-.017.055-.02a.67.67 0 01.254-.047z"/></svg>
Img ui-pin
<img class="svg-icon" src="assets/icons/ui-pin.svg" alt="ui-pin">
ui-qrcode
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-qrcode</title>
    <use href="assets/sprites/fullSet.svg#ui-qrcode"></use>
</svg>
Inline
<svg version="1.1" id="ui-qrcode" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M0 0v20h20V0H0zm20 20v4h4v-4h-4zm4 4v4h4v-4h-4zm4 4v4h-4v4h4v4h8v-4h4v4h4v2h4V28h-4v4h-4v-4h-4.041v-3.592h-4V28H28zm12 0h4v-4h-4v4zM28 0v20h20V0H28zM3.637 3.637h12.726v12.726H3.637V3.637zm28 0h12.726v12.726H31.637V3.637zM7.982 8.166l.002 3.668h4.034V8.166H7.982zm28 0l.002 3.668h4.034V8.166h-4.036zM0 28v20h20V28H0zm3.637 3.637h12.726v12.726H3.637V31.637zm4.345 4.529l.002 3.668h4.034v-3.668H7.982zM24 44v4h8v-4h-8zm12 0v4h4v-4h-4zm8 0v4h4v-4h-4z"/></svg>
Img ui-qrcode
<img class="svg-icon" src="assets/icons/ui-qrcode.svg" alt="ui-qrcode">
ui-secret
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-secret</title>
    <use href="assets/sprites/fullSet.svg#ui-secret"></use>
</svg>
Inline
<svg version="1.1" id="ui-secret" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M38.991 28.903l2.24-5.87A1.498 1.498 0 0039.826 21h-5.484c1.031-1.772 1.669-3.806 1.669-6v-.028c3.675-.731 6-1.79 6-2.972 0-1.247-2.56-2.353-6.572-3.094-.863-3.075-2.531-6.169-3.807-7.763a3.01 3.01 0 00-3.703-.825l-2.587 1.294a2.998 2.998 0 01-2.682 0L20.072.317a3.01 3.01 0 00-3.703.825c-1.266 1.594-2.944 4.688-3.807 7.763C8.56 9.645 6 10.752 6 12c0 1.181 2.326 2.24 6 2.972V15c0 2.194.638 4.228 1.67 6H8.277a1.499 1.499 0 00-1.379 2.09l2.42 5.645c-3.76 2.184-6.32 6.206-6.32 10.866v4.2A4.207 4.207 0 007.2 48h33.602c2.315 0 4.2-1.884 4.2-4.2v-4.2c0-4.538-2.42-8.476-6.01-10.697zM19.5 45l-3.9-18 4.65 3 2.25 3.75zm9 0l-3-11.25L27.75 30l4.65-3zm3.91-27.985c-.366 1.115-.657 2.306-1.547 3.131-.947.872-4.5 2.1-6-2.344-.263-.787-1.444-.787-1.716 0-1.594 4.707-5.25 3.038-6 2.344-.891-.825-1.191-2.016-1.547-3.131-.075-.235-.59-.535-.59-.544v-1.013c2.652.338 5.718.544 9 .544 3.28 0 6.346-.197 9-.544v1.013c-.01.008-.525.3-.6.544z"/></svg>
Img ui-secret
<img class="svg-icon" src="assets/icons/ui-secret.svg" alt="ui-secret">
ui-settings
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-settings</title>
    <use href="assets/sprites/fullSet.svg#ui-settings"></use>
</svg>
Inline
<svg id="ui-settings" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path id="path1" d="M226.073 0c-4.554 0-8.258 3.689-8.258 8.214v10.241a63.277 63.277 0 00-11.766 6.778l-8.968-5.15a8.263 8.263 0 00-4.114-1.095 8.313 8.313 0 00-7.163 4.114l-17.197 29.57a8.155 8.155 0 00-.83 6.245 8.14 8.14 0 003.849 4.972l8.939 5.121a62.814 62.814 0 00-.356 6.763c0 2.284.114 4.543.356 6.764l-8.94 5.135a8.137 8.137 0 00-3.847 4.973 8.082 8.082 0 00.829 6.216l17.197 29.598c1.471 2.532 4.217 4.1 7.163 4.1a8.26 8.26 0 004.114-1.095l8.968-5.136a63.25 63.25 0 0011.766 6.764v10.256c0 2.191.851 4.251 2.412 5.801a8.246 8.246 0 005.846 2.398h34.394c4.554 0 8.258-3.675 8.258-8.2v-10.255a63.213 63.213 0 0011.766-6.764l8.968 5.136a8.258 8.258 0 004.114 1.095c2.948 0 5.692-1.567 7.163-4.1l17.197-29.598a8.082 8.082 0 00.83-6.216 8.164 8.164 0 00-3.849-4.988l-8.939-5.12c.241-2.221.356-4.48.356-6.764 0-2.283-.114-4.543-.356-6.763l8.94-5.12a8.125 8.125 0 003.847-4.973 8.155 8.155 0 00-.829-6.246l-17.197-29.569a8.314 8.314 0 00-7.163-4.114 8.26 8.26 0 00-4.114 1.095l-8.968 5.15a63.277 63.277 0 00-11.766-6.778V8.214c0-4.525-3.704-8.214-8.258-8.214h-34.394zm17.197 30.31c25.11 0 45.464 20.353 45.464 45.463s-20.354 45.464-45.464 45.464-45.464-20.354-45.464-45.464S218.16 30.31 243.27 30.31zM88.66 136.391c-6.83 0-12.387 5.526-12.387 12.313v15.377a94.792 94.792 0 00-17.641 10.152l-13.453-7.71a12.45 12.45 0 00-6.186-1.643c-4.42 0-8.522 2.36-10.73 6.157L2.468 215.406a12.197 12.197 0 00-1.243 9.354c.857 3.175 2.906 5.817 5.771 7.459l13.409 7.695a94.058 94.058 0 000 20.276l-13.409 7.695c-2.866 1.643-4.914 4.283-5.771 7.46a12.16 12.16 0 001.243 9.338l25.795 44.383c2.208 3.798 6.312 6.157 10.73 6.157 2.162 0 4.305-.562 6.186-1.643l13.453-7.71a94.847 94.847 0 0017.64 10.152V351.4c0 3.287 1.285 6.377 3.627 8.702a12.367 12.367 0 008.76 3.611h51.592c6.83 0 12.387-5.527 12.387-12.313v-15.377a94.792 94.792 0 0017.641-10.152l13.453 7.71a12.442 12.442 0 006.186 1.643c4.421 0 8.522-2.358 10.73-6.157l25.795-44.383a12.16 12.16 0 001.243-9.339 12.232 12.232 0 00-5.772-7.473l-13.408-7.681a94.056 94.056 0 000-20.276l13.408-7.695c2.867-1.64 4.917-4.283 5.772-7.46a12.196 12.196 0 00-1.243-9.353l-25.78-44.368a12.47 12.47 0 00-10.745-6.172 12.46 12.46 0 00-6.186 1.658l-13.453 7.71a94.792 94.792 0 00-17.641-10.152v-15.377c0-6.787-5.556-12.313-12.387-12.313H88.66zm210.774 15.155c-3.188 0-5.787 2.575-5.787 5.742v7.178a44.194 44.194 0 00-8.228 4.735l-6.29-3.596a5.792 5.792 0 00-7.888 2.102l-12.032 20.719a5.691 5.691 0 002.102 7.844l6.26 3.581a43.978 43.978 0 00-.252 4.736c0 1.598.083 3.181.252 4.736l-6.26 3.581a5.719 5.719 0 00-2.694 3.493 5.662 5.662 0 00.592 4.351l12.032 20.72a5.792 5.792 0 007.888 2.1l6.29-3.595a44.22 44.22 0 008.228 4.735v7.178c0 1.534.595 2.97 1.688 4.055a5.798 5.798 0 004.1 1.687h24.063c3.188 0 5.787-2.575 5.787-5.742v-7.178a44.194 44.194 0 008.228-4.735l6.29 3.596a5.79 5.79 0 007.888-2.102l12.032-20.719a5.662 5.662 0 00.592-4.351 5.718 5.718 0 00-2.694-3.493l-6.26-3.581c.169-1.555.252-3.138.252-4.736 0-1.598-.083-3.181-.252-4.736l6.26-3.581a5.698 5.698 0 002.102-7.844l-12.032-20.72a5.792 5.792 0 00-7.888-2.1l-6.29 3.595a44.194 44.194 0 00-8.228-4.735v-7.178c0-3.167-2.6-5.742-5.787-5.742h-24.064zm12.032 21.222c17.577 0 31.819 14.242 31.819 31.819 0 17.577-14.242 31.834-31.819 31.834-17.577 0-31.819-14.257-31.819-31.834 0-17.577 14.242-31.819 31.82-31.819zm-197.01 9.087c37.663 0 68.195 30.532 68.195 68.196s-30.532 68.196-68.196 68.196c-37.663 0-68.196-30.532-68.196-68.196s30.533-68.196 68.196-68.196z" transform="translate(-.105) scale(.13197)"/></svg>
Img ui-settings
<img class="svg-icon" src="assets/icons/ui-settings.svg" alt="ui-settings">
ui-share
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-share</title>
    <use href="assets/sprites/fullSet.svg#ui-share"></use>
</svg>
Inline
<svg id="ui-share" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M40.008 0c-4.39 0-7.996 3.601-7.996 7.992 0 .573.063 1.13.18 1.67l-18.186 9.092a7.987 7.987 0 00-6.014-2.746C3.602 16.008 0 19.609 0 24c0 4.39 3.601 7.992 7.992 7.992a7.987 7.987 0 006.014-2.746l18.185 9.092a7.913 7.913 0 00-.18 1.67c0 4.39 3.606 7.992 7.997 7.992C44.398 48 48 44.399 48 40.008c0-4.39-3.601-7.996-7.992-7.996-2.389 0-4.544 1.07-6.014 2.75L15.81 25.67a7.94 7.94 0 00.18-1.67 7.94 7.94 0 00-.18-1.67l18.185-9.092c1.47 1.68 3.625 2.75 6.014 2.75 4.39 0 7.992-3.605 7.992-7.996C48 3.602 44.399 0 40.008 0zm0 4.002a3.96 3.96 0 013.99 3.99 3.963 3.963 0 01-3.99 3.994 3.966 3.966 0 01-3.994-3.994 3.963 3.963 0 013.994-3.99zM7.992 20.01A3.963 3.963 0 0111.986 24a3.963 3.963 0 01-3.994 3.99A3.96 3.96 0 014.002 24a3.96 3.96 0 013.99-3.99zm32.016 16.004a3.963 3.963 0 013.99 3.994 3.96 3.96 0 01-3.99 3.99 3.963 3.963 0 01-3.994-3.99 3.966 3.966 0 013.994-3.994z"/></svg>
Img ui-share
<img class="svg-icon" src="assets/icons/ui-share.svg" alt="ui-share">
ui-tag
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-tag</title>
    <use href="assets/sprites/fullSet.svg#ui-tag"></use>
</svg>
Inline
<svg version="1.1" id="ui-tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M14.194 10.139q0-1.68-1.188-2.868t-2.867-1.188q-1.68 0-2.868 1.188T6.083 10.14q0 1.679 1.188 2.867t2.868 1.188q1.679 0 2.867-1.188t1.188-2.867zM48 28.389q0 1.678-1.172 2.85L31.27 46.829Q30.036 48 28.388 48q-1.68 0-2.851-1.172L2.883 24.143Q1.68 22.97.84 20.943 0 18.915 0 17.236V4.056q0-1.648 1.204-2.852T4.055 0h13.18q1.68 0 3.708.84 2.027.84 3.231 2.043l22.654 22.622Q48 26.741 48 28.388z"/></svg>
Img ui-tag
<img class="svg-icon" src="assets/icons/ui-tag.svg" alt="ui-tag">
ui-tags
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-tags</title>
    <use href="assets/sprites/fullSet.svg#ui-tags"></use>
</svg>
Inline
<svg version="1.1" id="ui-tags" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M11.324 12.942q0-1.34-.948-2.288-.948-.948-2.288-.948-1.34 0-2.287.948-.948.948-.948 2.288 0 1.34.948 2.287.948.948 2.287.948 1.34 0 2.288-.948.948-.948.948-2.287zM38.294 27.5q0 1.34-.935 2.275L24.948 42.212q-.986.935-2.3.935-1.34 0-2.275-.935L2.3 24.114q-.96-.935-1.63-2.553Q0 19.943 0 18.604V8.089q0-1.315.96-2.275.961-.96 2.275-.96H13.75q1.34 0 2.958.669 1.617.67 2.578 1.63l18.073 18.048q.935.985.935 2.3zm9.706 0q0 1.34-.935 2.275L34.654 42.212q-.986.935-2.3.935-.91 0-1.491-.354-.582-.354-1.34-1.137l11.88-11.88q.935-.936.935-2.275 0-1.315-.935-2.3L23.33 7.153q-.96-.96-2.578-1.63-1.618-.67-2.957-.67h5.662q1.34 0 2.957.67 1.618.67 2.578 1.63l18.073 18.048q.935.985.935 2.3z"/></svg>
Img ui-tags
<img class="svg-icon" src="assets/icons/ui-tags.svg" alt="ui-tags">
ui-trash
Sprite
<svg viewBox="0 0 48 48" aria-hidden="true" focusable="false" role="presentation">
    <title>ui-trash</title>
    <use href="assets/sprites/fullSet.svg#ui-trash"></use>
</svg>
Inline
<svg id="ui-trash" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path d="M19.998 0c-3.291 0-6.004 2.712-6.004 6.004v2H3.99v4.002H6.1l1.695 30.326c.166 3.159 2.816 5.67 5.978 5.668h20.454c3.162.002 5.812-2.51 5.978-5.668L41.9 12.006h2.11V8.004H34.006v-2C34.006 2.712 31.293 0 28.002 0zm0 4.002h8.004c1.129 0 2.002.873 2.002 2.002v2H17.996v-2c0-1.129.873-2.002 2.002-2.002zm-9.887 8.004H37.89l-1.682 30.113v.004a1.953 1.953 0 01-1.98 1.875H13.773a1.953 1.953 0 01-1.98-1.875v-.004zm3.883 3.99v24.012h4.002V15.996zm8.004 0v24.012h4.004V15.996zm8.006 0v24.012h4.002V15.996z"/></svg>
Img ui-trash
<img class="svg-icon" src="assets/icons/ui-trash.svg" alt="ui-trash">
Top