Web Design Guide 2024-10-28 08:44:01 | 2.0.0

Iconography 

<p>Place icons anywhere with the <code class="code-inline-preview">&lt;i class=&quot;icon -{name}&quot;&gt;&lt;/i&gt;</code>
    tag</p>
<table class="example-table">
    <thead>
        <tr>
            <th>Icon</th>
            <th>Class</th>
            <th>Example</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><i class="icon -arrow-right-bottom"></i></td>
            <td><code class="code-inline-preview">-arrow-right-bottom</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -arrow-right-bottom&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -arrow-right-middle"></i></td>
            <td><code class="code-inline-preview">-arrow-right-middle</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -arrow-right-middle&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -arrow-right-top"></i></td>
            <td><code class="code-inline-preview">-arrow-right-top</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -arrow-right-top&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -basket"></i></td>
            <td><code class="code-inline-preview">-basket</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -basket&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -calendar"></i></td>
            <td><code class="code-inline-preview">-calendar</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -calendar&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -caret-down"></i></td>
            <td><code class="code-inline-preview">-caret-down</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -caret-down&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -caret-left"></i></td>
            <td><code class="code-inline-preview">-caret-left</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -caret-left&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -caret-right"></i></td>
            <td><code class="code-inline-preview">-caret-right</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -caret-right&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -caret-up"></i></td>
            <td><code class="code-inline-preview">-caret-up</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -caret-up&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -chevron-down"></i></td>
            <td><code class="code-inline-preview">-chevron-down</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -chevron-down&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -chevron-left"></i></td>
            <td><code class="code-inline-preview">-chevron-left</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -chevron-left&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -chevron-right"></i></td>
            <td><code class="code-inline-preview">-chevron-right</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -chevron-right&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -chevron-up"></i></td>
            <td><code class="code-inline-preview">-chevron-up</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -chevron-up&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -clock"></i></td>
            <td><code class="code-inline-preview">-clock</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -clock&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -contact"></i></td>
            <td><code class="code-inline-preview">-contact</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -contact&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -cross"></i></td>
            <td><code class="code-inline-preview">-cross</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -cross&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -dealerfinder"></i></td>
            <td><code class="code-inline-preview">-dealerfinder</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -dealerfinder&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -download"></i></td>
            <td><code class="code-inline-preview">-download</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -download&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -edit"></i></td>
            <td><code class="code-inline-preview">-edit</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -edit&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -event"></i></td>
            <td><code class="code-inline-preview">-event</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -event&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -facebook"></i></td>
            <td><code class="code-inline-preview">-facebook</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -facebook&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -filter"></i></td>
            <td><code class="code-inline-preview">-filter</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -filter&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -google"></i></td>
            <td><code class="code-inline-preview">-google</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -google&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -help"></i></td>
            <td><code class="code-inline-preview">-help</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -help&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -hook"></i></td>
            <td><code class="code-inline-preview">-hook</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -hook&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -information"></i></td>
            <td><code class="code-inline-preview">-information</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -information&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -instagram"></i></td>
            <td><code class="code-inline-preview">-instagram</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -instagram&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -language-de"></i></td>
            <td><code class="code-inline-preview">-language-de</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -language-de&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -language-en"></i></td>
            <td><code class="code-inline-preview">-language-en</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -language-en&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -linkedin"></i></td>
            <td><code class="code-inline-preview">-linkedin</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -linkedin&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -location"></i></td>
            <td><code class="code-inline-preview">-location</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -location&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -logged-in"></i></td>
            <td><code class="code-inline-preview">-logged-in</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -logged-in&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -pinterest"></i></td>
            <td><code class="code-inline-preview">-pinterest</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -pinterest&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -profile"></i></td>
            <td><code class="code-inline-preview">-profile</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -profile&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -search"></i></td>
            <td><code class="code-inline-preview">-search</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -search&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -telegram-light"></i></td>
            <td><code class="code-inline-preview">-telegram-light</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -telegram-light&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -telegram"></i></td>
            <td><code class="code-inline-preview">-telegram</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -telegram&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -tick"></i></td>
            <td><code class="code-inline-preview">-tick</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -tick&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -tiktok-light"></i></td>
            <td><code class="code-inline-preview">-tiktok-light</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -tiktok-light&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -tiktok"></i></td>
            <td><code class="code-inline-preview">-tiktok</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -tiktok&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -trash"></i></td>
            <td><code class="code-inline-preview">-trash</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -trash&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -twitter"></i></td>
            <td><code class="code-inline-preview">-twitter</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -twitter&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -vk-light"></i></td>
            <td><code class="code-inline-preview">-vk-light</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -vk-light&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -vk"></i></td>
            <td><code class="code-inline-preview">-vk</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -vk&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -wechat-light"></i></td>
            <td><code class="code-inline-preview">-wechat-light</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -wechat-light&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -wechat"></i></td>
            <td><code class="code-inline-preview">-wechat</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -wechat&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -weibo-light"></i></td>
            <td><code class="code-inline-preview">-weibo-light</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -weibo-light&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -weibo"></i></td>
            <td><code class="code-inline-preview">-weibo</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -weibo&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -whatsapp-light"></i></td>
            <td><code class="code-inline-preview">-whatsapp-light</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -whatsapp-light&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -whatsapp"></i></td>
            <td><code class="code-inline-preview">-whatsapp</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -whatsapp&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -xing"></i></td>
            <td><code class="code-inline-preview">-xing</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -xing&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
        <tr>
            <td><i class="icon -youtube"></i></td>
            <td><code class="code-inline-preview">-youtube</code></td>
            <td>
                <code class="code-inline-preview">&lt;i class&#x3D;&quot;icon -youtube&quot;&gt;&lt;/i&gt;</code>

            </td>
        </tr>
    </tbody>
</table>
 
<p>Place icons anywhere with the <code class="code-inline-preview">&lt;i class=&quot;icon -{name}&quot;&gt;&lt;/i&gt;</code>
  tag</p>
<table class="example-table">
  <thead>
    <tr>
      <th>Icon</th>
      <th>Class</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    {{#each icons}}
      <tr>
        <td><i class="icon -{{name}}"></i></td>
        <td><code class="code-inline-preview">-{{name}}</code></td>
        <td>
          {{render '@helper-code-inline-preview' this}}
        </td>
      </tr>
    {{/each}}
  </tbody>
</table>
 
{
  "icons": [
    {
      "name": "arrow-right-bottom",
      "snippet": "<i class=\"icon -arrow-right-bottom\"></i>"
    },
    {
      "name": "arrow-right-middle",
      "snippet": "<i class=\"icon -arrow-right-middle\"></i>"
    },
    {
      "name": "arrow-right-top",
      "snippet": "<i class=\"icon -arrow-right-top\"></i>"
    },
    {
      "name": "basket",
      "snippet": "<i class=\"icon -basket\"></i>"
    },
    {
      "name": "calendar",
      "snippet": "<i class=\"icon -calendar\"></i>"
    },
    {
      "name": "caret-down",
      "snippet": "<i class=\"icon -caret-down\"></i>"
    },
    {
      "name": "caret-left",
      "snippet": "<i class=\"icon -caret-left\"></i>"
    },
    {
      "name": "caret-right",
      "snippet": "<i class=\"icon -caret-right\"></i>"
    },
    {
      "name": "caret-up",
      "snippet": "<i class=\"icon -caret-up\"></i>"
    },
    {
      "name": "chevron-down",
      "snippet": "<i class=\"icon -chevron-down\"></i>"
    },
    {
      "name": "chevron-left",
      "snippet": "<i class=\"icon -chevron-left\"></i>"
    },
    {
      "name": "chevron-right",
      "snippet": "<i class=\"icon -chevron-right\"></i>"
    },
    {
      "name": "chevron-up",
      "snippet": "<i class=\"icon -chevron-up\"></i>"
    },
    {
      "name": "clock",
      "snippet": "<i class=\"icon -clock\"></i>"
    },
    {
      "name": "contact",
      "snippet": "<i class=\"icon -contact\"></i>"
    },
    {
      "name": "cross",
      "snippet": "<i class=\"icon -cross\"></i>"
    },
    {
      "name": "dealerfinder",
      "snippet": "<i class=\"icon -dealerfinder\"></i>"
    },
    {
      "name": "download",
      "snippet": "<i class=\"icon -download\"></i>"
    },
    {
      "name": "edit",
      "snippet": "<i class=\"icon -edit\"></i>"
    },
    {
      "name": "event",
      "snippet": "<i class=\"icon -event\"></i>"
    },
    {
      "name": "facebook",
      "snippet": "<i class=\"icon -facebook\"></i>"
    },
    {
      "name": "filter",
      "snippet": "<i class=\"icon -filter\"></i>"
    },
    {
      "name": "google",
      "snippet": "<i class=\"icon -google\"></i>"
    },
    {
      "name": "help",
      "snippet": "<i class=\"icon -help\"></i>"
    },
    {
      "name": "hook",
      "snippet": "<i class=\"icon -hook\"></i>"
    },
    {
      "name": "information",
      "snippet": "<i class=\"icon -information\"></i>"
    },
    {
      "name": "instagram",
      "snippet": "<i class=\"icon -instagram\"></i>"
    },
    {
      "name": "language-de",
      "snippet": "<i class=\"icon -language-de\"></i>"
    },
    {
      "name": "language-en",
      "snippet": "<i class=\"icon -language-en\"></i>"
    },
    {
      "name": "linkedin",
      "snippet": "<i class=\"icon -linkedin\"></i>"
    },
    {
      "name": "location",
      "snippet": "<i class=\"icon -location\"></i>"
    },
    {
      "name": "logged-in",
      "snippet": "<i class=\"icon -logged-in\"></i>"
    },
    {
      "name": "pinterest",
      "snippet": "<i class=\"icon -pinterest\"></i>"
    },
    {
      "name": "profile",
      "snippet": "<i class=\"icon -profile\"></i>"
    },
    {
      "name": "search",
      "snippet": "<i class=\"icon -search\"></i>"
    },
    {
      "name": "telegram-light",
      "snippet": "<i class=\"icon -telegram-light\"></i>"
    },
    {
      "name": "telegram",
      "snippet": "<i class=\"icon -telegram\"></i>"
    },
    {
      "name": "tick",
      "snippet": "<i class=\"icon -tick\"></i>"
    },
    {
      "name": "tiktok-light",
      "snippet": "<i class=\"icon -tiktok-light\"></i>"
    },
    {
      "name": "tiktok",
      "snippet": "<i class=\"icon -tiktok\"></i>"
    },
    {
      "name": "trash",
      "snippet": "<i class=\"icon -trash\"></i>"
    },
    {
      "name": "twitter",
      "snippet": "<i class=\"icon -twitter\"></i>"
    },
    {
      "name": "vk-light",
      "snippet": "<i class=\"icon -vk-light\"></i>"
    },
    {
      "name": "vk",
      "snippet": "<i class=\"icon -vk\"></i>"
    },
    {
      "name": "wechat-light",
      "snippet": "<i class=\"icon -wechat-light\"></i>"
    },
    {
      "name": "wechat",
      "snippet": "<i class=\"icon -wechat\"></i>"
    },
    {
      "name": "weibo-light",
      "snippet": "<i class=\"icon -weibo-light\"></i>"
    },
    {
      "name": "weibo",
      "snippet": "<i class=\"icon -weibo\"></i>"
    },
    {
      "name": "whatsapp-light",
      "snippet": "<i class=\"icon -whatsapp-light\"></i>"
    },
    {
      "name": "whatsapp",
      "snippet": "<i class=\"icon -whatsapp\"></i>"
    },
    {
      "name": "xing",
      "snippet": "<i class=\"icon -xing\"></i>"
    },
    {
      "name": "youtube",
      "snippet": "<i class=\"icon -youtube\"></i>"
    }
  ]
}

There are no notes for this item.