    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;Typicons&lt;/title&gt;
    &lt;style&gt;
      body
      {
        margin: 0;
        padding: 1em;
        font-family: system-ui, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 18px;
        color: #333;
        background-color: #fff;
      }

      header
      {
        position: fixed;
        left: 1em;
        right: 1em;
        top: 0;
        background: #fff;
        z-index: 1;
      }

      header .container
      {
        border-bottom: 1px solid #ddd;
      }

      header h1
      {
        font: inherit;
        font-weight: bold;
        margin-top: 1em;
      }

      header p
      {
        color: #666;
        max-width: 500px;
      }

      .container
      {
        max-width: 784px;
        margin: auto;
        position: relative;
      }

      #icons
      {
        font-size: 24px;
        display: flex;
        margin: 92px -8px 0;
        flex-flow: row wrap;
      }

      .icon
      {
        width: 200px;
        max-width: 50%;
        box-sizing: border-box;
        display: flex;
        padding: 8px;
      }

      .label
      {
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        padding: 4px 8px;
        font-size: 12px;
        font-family: Monaco, monospace;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 1px;
        color: #666;
      }

      @media (max-width: 512px)
      {
        #icons
        {
          margin-top: 112px;
        }
      }

      @charset &quot;UTF-8&quot;;

      @font-face
      {
        font-family: &quot;typicons&quot;;
        src: url(&quot;typicons.eot?d8dd0dcd722b6c1a92302669f7f132b5?#iefix&quot;) format(&quot;embedded-opentype&quot;),
          url(&quot;typicons.woff2?d8dd0dcd722b6c1a92302669f7f132b5&quot;) format(&quot;woff2&quot;),
          url(&quot;typicons.woff?d8dd0dcd722b6c1a92302669f7f132b5&quot;) format(&quot;woff&quot;),
          url(&quot;typicons.ttf?d8dd0dcd722b6c1a92302669f7f132b5&quot;) format(&quot;truetype&quot;),
          url(&quot;typicons.svg?d8dd0dcd722b6c1a92302669f7f132b5#typicons&quot;) format(&quot;svg&quot;);
      }

      .typcn:before
      {
        font-family: typicons !important;
        font-style: normal;
        font-weight: normal !important;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      .typcn-lg
      {
        font-size: 1.33333333em;
        line-height: 0.75em;
        vertical-align: -15%;
      }

      .typcn-2x
      {
        font-size: 2em;
      }

      .typcn-3x
      {
        font-size: 3em;
      }

      .typcn-4x
      {
        font-size: 4em;
      }

      .typcn-5x
      {
        font-size: 5em;
      }

      .typcn-adjust-brightness:before
      {
        content: &quot;\e000&quot;;
      }

      .typcn-adjust-contrast:before
      {
        content: &quot;\e001&quot;;
      }

      .typcn-anchor-outline:before
      {
        content: &quot;\e002&quot;;
      }

      .typcn-anchor:before
      {
        content: &quot;\e003&quot;;
      }

      .typcn-archive:before
      {
        content: &quot;\e004&quot;;
      }

      .typcn-arrow-back-outline:before
      {
        content: &quot;\e005&quot;;
      }

      .typcn-arrow-back:before
      {
        content: &quot;\e006&quot;;
      }

      .typcn-arrow-down-outline:before
      {
        content: &quot;\e007&quot;;
      }

      .typcn-arrow-down-thick:before
      {
        content: &quot;\e008&quot;;
      }

      .typcn-arrow-down:before
      {
        content: &quot;\e009&quot;;
      }

      .typcn-arrow-forward-outline:before
      {
        content: &quot;\e00a&quot;;
      }

      .typcn-arrow-forward:before
      {
        content: &quot;\e00b&quot;;
      }

      .typcn-arrow-left-outline:before
      {
        content: &quot;\e00c&quot;;
      }

      .typcn-arrow-left-thick:before
      {
        content: &quot;\e00d&quot;;
      }

      .typcn-arrow-left:before
      {
        content: &quot;\e00e&quot;;
      }

      .typcn-arrow-loop-outline:before
      {
        content: &quot;\e00f&quot;;
      }

      .typcn-arrow-loop:before
      {
        content: &quot;\e010&quot;;
      }

      .typcn-arrow-maximise-outline:before
      {
        content: &quot;\e011&quot;;
      }

      .typcn-arrow-maximise:before
      {
        content: &quot;\e012&quot;;
      }

      .typcn-arrow-minimise-outline:before
      {
        content: &quot;\e013&quot;;
      }

      .typcn-arrow-minimise:before
      {
        content: &quot;\e014&quot;;
      }

      .typcn-arrow-move-outline:before
      {
        content: &quot;\e015&quot;;
      }

      .typcn-arrow-move:before
      {
        content: &quot;\e016&quot;;
      }

      .typcn-arrow-repeat-outline:before
      {
        content: &quot;\e017&quot;;
      }

      .typcn-arrow-repeat:before
      {
        content: &quot;\e018&quot;;
      }

      .typcn-arrow-right-outline:before
      {
        content: &quot;\e019&quot;;
      }

      .typcn-arrow-right-thick:before
      {
        content: &quot;\e01a&quot;;
      }

      .typcn-arrow-right:before
      {
        content: &quot;\e01b&quot;;
      }

      .typcn-arrow-shuffle:before
      {
        content: &quot;\e01c&quot;;
      }

      .typcn-arrow-sorted-down:before
      {
        content: &quot;\e01d&quot;;
      }

      .typcn-arrow-sorted-up:before
      {
        content: &quot;\e01e&quot;;
      }

      .typcn-arrow-sync-outline:before
      {
        content: &quot;\e01f&quot;;
      }

      .typcn-arrow-sync:before
      {
        content: &quot;\e020&quot;;
      }

      .typcn-arrow-unsorted:before
      {
        content: &quot;\e021&quot;;
      }

      .typcn-arrow-up-outline:before
      {
        content: &quot;\e022&quot;;
      }

      .typcn-arrow-up-thick:before
      {
        content: &quot;\e023&quot;;
      }

      .typcn-arrow-up:before
      {
        content: &quot;\e024&quot;;
      }

      .typcn-at:before
      {
        content: &quot;\e025&quot;;
      }

      .typcn-attachment-outline:before
      {
        content: &quot;\e026&quot;;
      }

      .typcn-attachment:before
      {
        content: &quot;\e027&quot;;
      }

      .typcn-backspace-outline:before
      {
        content: &quot;\e028&quot;;
      }

      .typcn-backspace:before
      {
        content: &quot;\e029&quot;;
      }

      .typcn-battery-charge:before
      {
        content: &quot;\e02a&quot;;
      }

      .typcn-battery-full:before
      {
        content: &quot;\e02b&quot;;
      }

      .typcn-battery-high:before
      {
        content: &quot;\e02c&quot;;
      }

      .typcn-battery-low:before
      {
        content: &quot;\e02d&quot;;
      }

      .typcn-battery-mid:before
      {
        content: &quot;\e02e&quot;;
      }

      .typcn-beaker:before
      {
        content: &quot;\e02f&quot;;
      }

      .typcn-beer:before
      {
        content: &quot;\e030&quot;;
      }

      .typcn-bell:before
      {
        content: &quot;\e031&quot;;
      }

      .typcn-book:before
      {
        content: &quot;\e032&quot;;
      }

      .typcn-bookmark:before
      {
        content: &quot;\e033&quot;;
      }

      .typcn-briefcase:before
      {
        content: &quot;\e034&quot;;
      }

      .typcn-brush:before
      {
        content: &quot;\e035&quot;;
      }

      .typcn-business-card:before
      {
        content: &quot;\e036&quot;;
      }

      .typcn-calculator:before
      {
        content: &quot;\e037&quot;;
      }

      .typcn-calendar-outline:before
      {
        content: &quot;\e038&quot;;
      }

      .typcn-calendar:before
      {
        content: &quot;\e039&quot;;
      }

      .typcn-camera-outline:before
      {
        content: &quot;\e03a&quot;;
      }

      .typcn-camera:before
      {
        content: &quot;\e03b&quot;;
      }

      .typcn-cancel-outline:before
      {
        content: &quot;\e03c&quot;;
      }

      .typcn-cancel:before
      {
        content: &quot;\e03d&quot;;
      }

      .typcn-chart-area-outline:before
      {
        content: &quot;\e03e&quot;;
      }

      .typcn-chart-area:before
      {
        content: &quot;\e03f&quot;;
      }

      .typcn-chart-bar-outline:before
      {
        content: &quot;\e040&quot;;
      }

      .typcn-chart-bar:before
      {
        content: &quot;\e041&quot;;
      }

      .typcn-chart-line-outline:before
      {
        content: &quot;\e042&quot;;
      }

      .typcn-chart-line:before
      {
        content: &quot;\e043&quot;;
      }

      .typcn-chart-pie-outline:before
      {
        content: &quot;\e044&quot;;
      }

      .typcn-chart-pie:before
      {
        content: &quot;\e045&quot;;
      }

      .typcn-chevron-left-outline:before
      {
        content: &quot;\e046&quot;;
      }

      .typcn-chevron-left:before
      {
        content: &quot;\e047&quot;;
      }

      .typcn-chevron-right-outline:before
      {
        content: &quot;\e048&quot;;
      }

      .typcn-chevron-right:before
      {
        content: &quot;\e049&quot;;
      }

      .typcn-clipboard:before
      {
        content: &quot;\e04a&quot;;
      }

      .typcn-cloud-storage:before
      {
        content: &quot;\e04b&quot;;
      }

      .typcn-cloud-storage-outline:before
      {
        content: &quot;\e054&quot;;
      }

      .typcn-code-outline:before
      {
        content: &quot;\e04c&quot;;
      }

      .typcn-code:before
      {
        content: &quot;\e04d&quot;;
      }

      .typcn-coffee:before
      {
        content: &quot;\e04e&quot;;
      }

      .typcn-cog-outline:before
      {
        content: &quot;\e04f&quot;;
      }

      .typcn-cog:before
      {
        content: &quot;\e050&quot;;
      }

      .typcn-compass:before
      {
        content: &quot;\e051&quot;;
      }

      .typcn-contacts:before
      {
        content: &quot;\e052&quot;;
      }

      .typcn-credit-card:before
      {
        content: &quot;\e053&quot;;
      }

      .typcn-css3:before
      {
        content: &quot;\e055&quot;;
      }

      .typcn-database:before
      {
        content: &quot;\e056&quot;;
      }

      .typcn-delete-outline:before
      {
        content: &quot;\e057&quot;;
      }

      .typcn-delete:before
      {
        content: &quot;\e058&quot;;
      }

      .typcn-device-desktop:before
      {
        content: &quot;\e059&quot;;
      }

      .typcn-device-laptop:before
      {
        content: &quot;\e05a&quot;;
      }

      .typcn-device-phone:before
      {
        content: &quot;\e05b&quot;;
      }

      .typcn-device-tablet:before
      {
        content: &quot;\e05c&quot;;
      }

      .typcn-directions:before
      {
        content: &quot;\e05d&quot;;
      }

      .typcn-divide-outline:before
      {
        content: &quot;\e05e&quot;;
      }

      .typcn-divide:before
      {
        content: &quot;\e05f&quot;;
      }

      .typcn-document-add:before
      {
        content: &quot;\e060&quot;;
      }

      .typcn-document-delete:before
      {
        content: &quot;\e061&quot;;
      }

      .typcn-document-text:before
      {
        content: &quot;\e062&quot;;
      }

      .typcn-document:before
      {
        content: &quot;\e063&quot;;
      }

      .typcn-download-outline:before
      {
        content: &quot;\e064&quot;;
      }

      .typcn-download:before
      {
        content: &quot;\e065&quot;;
      }

      .typcn-dropbox:before
      {
        content: &quot;\e066&quot;;
      }

      .typcn-edit:before
      {
        content: &quot;\e067&quot;;
      }

      .typcn-eject-outline:before
      {
        content: &quot;\e068&quot;;
      }

      .typcn-eject:before
      {
        content: &quot;\e069&quot;;
      }

      .typcn-equals-outline:before
      {
        content: &quot;\e06a&quot;;
      }

      .typcn-equals:before
      {
        content: &quot;\e06b&quot;;
      }

      .typcn-export-outline:before
      {
        content: &quot;\e06c&quot;;
      }

      .typcn-export:before
      {
        content: &quot;\e06d&quot;;
      }

      .typcn-eye-outline:before
      {
        content: &quot;\e06e&quot;;
      }

      .typcn-eye:before
      {
        content: &quot;\e06f&quot;;
      }

      .typcn-feather:before
      {
        content: &quot;\e070&quot;;
      }

      .typcn-film:before
      {
        content: &quot;\e071&quot;;
      }

      .typcn-filter:before
      {
        content: &quot;\e072&quot;;
      }

      .typcn-flag-outline:before
      {
        content: &quot;\e073&quot;;
      }

      .typcn-flag:before
      {
        content: &quot;\e074&quot;;
      }

      .typcn-flash-outline:before
      {
        content: &quot;\e075&quot;;
      }

      .typcn-flash:before
      {
        content: &quot;\e076&quot;;
      }

      .typcn-flow-children:before
      {
        content: &quot;\e077&quot;;
      }

      .typcn-flow-merge:before
      {
        content: &quot;\e078&quot;;
      }

      .typcn-flow-parallel:before
      {
        content: &quot;\e079&quot;;
      }

      .typcn-flow-switch:before
      {
        content: &quot;\e07a&quot;;
      }

      .typcn-folder-add:before
      {
        content: &quot;\e07b&quot;;
      }

      .typcn-folder-delete:before
      {
        content: &quot;\e07c&quot;;
      }

      .typcn-folder-open:before
      {
        content: &quot;\e07d&quot;;
      }

      .typcn-folder:before
      {
        content: &quot;\e07e&quot;;
      }

      .typcn-gift:before
      {
        content: &quot;\e07f&quot;;
      }

      .typcn-globe-outline:before
      {
        content: &quot;\e080&quot;;
      }

      .typcn-globe:before
      {
        content: &quot;\e081&quot;;
      }

      .typcn-group-outline:before
      {
        content: &quot;\e082&quot;;
      }

      .typcn-group:before
      {
        content: &quot;\e083&quot;;
      }

      .typcn-headphones:before
      {
        content: &quot;\e084&quot;;
      }

      .typcn-heart-full-outline:before
      {
        content: &quot;\e085&quot;;
      }

      .typcn-heart-half-outline:before
      {
        content: &quot;\e086&quot;;
      }

      .typcn-heart-outline:before
      {
        content: &quot;\e087&quot;;
      }

      .typcn-heart:before
      {
        content: &quot;\e088&quot;;
      }

      .typcn-home-outline:before
      {
        content: &quot;\e089&quot;;
      }

      .typcn-home:before
      {
        content: &quot;\e08a&quot;;
      }

      .typcn-html5:before
      {
        content: &quot;\e08b&quot;;
      }

      .typcn-image-outline:before
      {
        content: &quot;\e08c&quot;;
      }

      .typcn-image:before
      {
        content: &quot;\e08d&quot;;
      }

      .typcn-infinity-outline:before
      {
        content: &quot;\e08e&quot;;
      }

      .typcn-infinity:before
      {
        content: &quot;\e08f&quot;;
      }

      .typcn-info-large-outline:before
      {
        content: &quot;\e090&quot;;
      }

      .typcn-info-large:before
      {
        content: &quot;\e091&quot;;
      }

      .typcn-info-outline:before
      {
        content: &quot;\e092&quot;;
      }

      .typcn-info:before
      {
        content: &quot;\e093&quot;;
      }

      .typcn-input-checked-outline:before
      {
        content: &quot;\e094&quot;;
      }

      .typcn-input-checked:before
      {
        content: &quot;\e095&quot;;
      }

      .typcn-key-outline:before
      {
        content: &quot;\e096&quot;;
      }

      .typcn-key:before
      {
        content: &quot;\e097&quot;;
      }

      .typcn-keyboard:before
      {
        content: &quot;\e098&quot;;
      }

      .typcn-leaf:before
      {
        content: &quot;\e099&quot;;
      }

      .typcn-lightbulb:before
      {
        content: &quot;\e09a&quot;;
      }

      .typcn-link-outline:before
      {
        content: &quot;\e09b&quot;;
      }

      .typcn-link:before
      {
        content: &quot;\e09c&quot;;
      }

      .typcn-location-arrow-outline:before
      {
        content: &quot;\e09d&quot;;
      }

      .typcn-location-arrow:before
      {
        content: &quot;\e09e&quot;;
      }

      .typcn-location-outline:before
      {
        content: &quot;\e09f&quot;;
      }

      .typcn-location:before
      {
        content: &quot;\e0a0&quot;;
      }

      .typcn-lock-closed-outline:before
      {
        content: &quot;\e0a1&quot;;
      }

      .typcn-lock-closed:before
      {
        content: &quot;\e0a2&quot;;
      }

      .typcn-lock-open-outline:before
      {
        content: &quot;\e0a3&quot;;
      }

      .typcn-lock-open:before
      {
        content: &quot;\e0a4&quot;;
      }

      .typcn-mail:before
      {
        content: &quot;\e0a5&quot;;
      }

      .typcn-map:before
      {
        content: &quot;\e0a6&quot;;
      }

      .typcn-media-eject-outline:before
      {
        content: &quot;\e0a7&quot;;
      }

      .typcn-media-eject:before
      {
        content: &quot;\e0a8&quot;;
      }

      .typcn-media-fast-forward-outline:before
      {
        content: &quot;\e0a9&quot;;
      }

      .typcn-media-fast-forward:before
      {
        content: &quot;\e0aa&quot;;
      }

      .typcn-media-pause-outline:before
      {
        content: &quot;\e0ab&quot;;
      }

      .typcn-media-pause:before
      {
        content: &quot;\e0ac&quot;;
      }

      .typcn-media-play-outline:before
      {
        content: &quot;\e0ad&quot;;
      }

      .typcn-media-play-reverse-outline:before
      {
        content: &quot;\e0ae&quot;;
      }

      .typcn-media-play-reverse:before
      {
        content: &quot;\e0af&quot;;
      }

      .typcn-media-play:before
      {
        content: &quot;\e0b0&quot;;
      }

      .typcn-media-record-outline:before
      {
        content: &quot;\e0b1&quot;;
      }

      .typcn-media-record:before
      {
        content: &quot;\e0b2&quot;;
      }

      .typcn-media-rewind-outline:before
      {
        content: &quot;\e0b3&quot;;
      }

      .typcn-media-rewind:before
      {
        content: &quot;\e0b4&quot;;
      }

      .typcn-media-stop-outline:before
      {
        content: &quot;\e0b5&quot;;
      }

      .typcn-media-stop:before
      {
        content: &quot;\e0b6&quot;;
      }

      .typcn-message-typing:before
      {
        content: &quot;\e0b7&quot;;
      }

      .typcn-message:before
      {
        content: &quot;\e0b8&quot;;
      }

      .typcn-messages:before
      {
        content: &quot;\e0b9&quot;;
      }

      .typcn-microphone-outline:before
      {
        content: &quot;\e0ba&quot;;
      }

      .typcn-microphone:before
      {
        content: &quot;\e0bb&quot;;
      }

      .typcn-minus-outline:before
      {
        content: &quot;\e0bc&quot;;
      }

      .typcn-minus:before
      {
        content: &quot;\e0bd&quot;;
      }

      .typcn-mortar-board:before
      {
        content: &quot;\e0be&quot;;
      }

      .typcn-news:before
      {
        content: &quot;\e0bf&quot;;
      }

      .typcn-notes-outline:before
      {
        content: &quot;\e0c0&quot;;
      }

      .typcn-notes:before
      {
        content: &quot;\e0c1&quot;;
      }

      .typcn-pen:before
      {
        content: &quot;\e0c2&quot;;
      }

      .typcn-pencil:before
      {
        content: &quot;\e0c3&quot;;
      }

      .typcn-phone-outline:before
      {
        content: &quot;\e0c4&quot;;
      }

      .typcn-phone:before
      {
        content: &quot;\e0c5&quot;;
      }

      .typcn-pi-outline:before
      {
        content: &quot;\e0c6&quot;;
      }

      .typcn-pi:before
      {
        content: &quot;\e0c7&quot;;
      }

      .typcn-pin-outline:before
      {
        content: &quot;\e0c8&quot;;
      }

      .typcn-pin:before
      {
        content: &quot;\e0c9&quot;;
      }

      .typcn-pipette:before
      {
        content: &quot;\e0ca&quot;;
      }

      .typcn-plane-outline:before
      {
        content: &quot;\e0cb&quot;;
      }

      .typcn-plane:before
      {
        content: &quot;\e0cc&quot;;
      }

      .typcn-plug:before
      {
        content: &quot;\e0cd&quot;;
      }

      .typcn-plus-outline:before
      {
        content: &quot;\e0ce&quot;;
      }

      .typcn-plus:before
      {
        content: &quot;\e0cf&quot;;
      }

      .typcn-point-of-interest-outline:before
      {
        content: &quot;\e0d0&quot;;
      }

      .typcn-point-of-interest:before
      {
        content: &quot;\e0d1&quot;;
      }

      .typcn-power-outline:before
      {
        content: &quot;\e0d2&quot;;
      }

      .typcn-power:before
      {
        content: &quot;\e0d3&quot;;
      }

      .typcn-printer:before
      {
        content: &quot;\e0d4&quot;;
      }

      .typcn-puzzle-outline:before
      {
        content: &quot;\e0d5&quot;;
      }

      .typcn-puzzle:before
      {
        content: &quot;\e0d6&quot;;
      }

      .typcn-radar-outline:before
      {
        content: &quot;\e0d7&quot;;
      }

      .typcn-radar:before
      {
        content: &quot;\e0d8&quot;;
      }

      .typcn-refresh-outline:before
      {
        content: &quot;\e0d9&quot;;
      }

      .typcn-refresh:before
      {
        content: &quot;\e0da&quot;;
      }

      .typcn-rss-outline:before
      {
        content: &quot;\e0db&quot;;
      }

      .typcn-rss:before
      {
        content: &quot;\e0dc&quot;;
      }

      .typcn-scissors-outline:before
      {
        content: &quot;\e0dd&quot;;
      }

      .typcn-scissors:before
      {
        content: &quot;\e0de&quot;;
      }

      .typcn-shopping-bag:before
      {
        content: &quot;\e0df&quot;;
      }

      .typcn-shopping-cart:before
      {
        content: &quot;\e0e0&quot;;
      }

      .typcn-social-at-circular:before
      {
        content: &quot;\e0e1&quot;;
      }

      .typcn-social-dribbble-circular:before
      {
        content: &quot;\e0e2&quot;;
      }

      .typcn-social-dribbble:before
      {
        content: &quot;\e0e3&quot;;
      }

      .typcn-social-facebook-circular:before
      {
        content: &quot;\e0e4&quot;;
      }

      .typcn-social-facebook:before
      {
        content: &quot;\e0e5&quot;;
      }

      .typcn-social-flickr-circular:before
      {
        content: &quot;\e0e6&quot;;
      }

      .typcn-social-flickr:before
      {
        content: &quot;\e0e7&quot;;
      }

      .typcn-social-github-circular:before
      {
        content: &quot;\e0e8&quot;;
      }

      .typcn-social-github:before
      {
        content: &quot;\e0e9&quot;;
      }

      .typcn-social-google-plus-circular:before
      {
        content: &quot;\e0ea&quot;;
      }

      .typcn-social-google-plus:before
      {
        content: &quot;\e0eb&quot;;
      }

      .typcn-social-instagram-circular:before
      {
        content: &quot;\e0ec&quot;;
      }

      .typcn-social-instagram:before
      {
        content: &quot;\e0ed&quot;;
      }

      .typcn-social-last-fm-circular:before
      {
        content: &quot;\e0ee&quot;;
      }

      .typcn-social-last-fm:before
      {
        content: &quot;\e0ef&quot;;
      }

      .typcn-social-linkedin-circular:before
      {
        content: &quot;\e0f0&quot;;
      }

      .typcn-social-linkedin:before
      {
        content: &quot;\e0f1&quot;;
      }

      .typcn-social-pinterest-circular:before
      {
        content: &quot;\e0f2&quot;;
      }

      .typcn-social-pinterest:before
      {
        content: &quot;\e0f3&quot;;
      }

      .typcn-social-skype-outline:before
      {
        content: &quot;\e0f4&quot;;
      }

      .typcn-social-skype:before
      {
        content: &quot;\e0f5&quot;;
      }

      .typcn-social-tumbler-circular:before
      {
        content: &quot;\e0f6&quot;;
      }

      .typcn-social-tumbler:before
      {
        content: &quot;\e0f7&quot;;
      }

      .typcn-social-twitter-circular:before
      {
        content: &quot;\e0f8&quot;;
      }

      .typcn-social-twitter:before
      {
        content: &quot;\e0f9&quot;;
      }

      .typcn-social-vimeo-circular:before
      {
        content: &quot;\e0fa&quot;;
      }

      .typcn-social-vimeo:before
      {
        content: &quot;\e0fb&quot;;
      }

      .typcn-social-youtube-circular:before
      {
        content: &quot;\e0fc&quot;;
      }

      .typcn-social-youtube:before
      {
        content: &quot;\e0fd&quot;;
      }

      .typcn-sort-alphabetically-outline:before
      {
        content: &quot;\e0fe&quot;;
      }

      .typcn-sort-alphabetically:before
      {
        content: &quot;\e0ff&quot;;
      }

      .typcn-sort-numerically-outline:before
      {
        content: &quot;\e100&quot;;
      }

      .typcn-sort-numerically:before
      {
        content: &quot;\e101&quot;;
      }

      .typcn-spanner-outline:before
      {
        content: &quot;\e102&quot;;
      }

      .typcn-spanner:before
      {
        content: &quot;\e103&quot;;
      }

      .typcn-spiral:before
      {
        content: &quot;\e104&quot;;
      }

      .typcn-star-full-outline:before
      {
        content: &quot;\e105&quot;;
      }

      .typcn-star-half-outline:before
      {
        content: &quot;\e106&quot;;
      }

      .typcn-star-half:before
      {
        content: &quot;\e107&quot;;
      }

      .typcn-star-outline:before
      {
        content: &quot;\e108&quot;;
      }

      .typcn-star:before
      {
        content: &quot;\e109&quot;;
      }

      .typcn-starburst-outline:before
      {
        content: &quot;\e10a&quot;;
      }

      .typcn-starburst:before
      {
        content: &quot;\e10b&quot;;
      }

      .typcn-stopwatch:before
      {
        content: &quot;\e10c&quot;;
      }

      .typcn-support:before
      {
        content: &quot;\e10d&quot;;
      }

      .typcn-tabs-outline:before
      {
        content: &quot;\e10e&quot;;
      }

      .typcn-tag:before
      {
        content: &quot;\e10f&quot;;
      }

      .typcn-tags:before
      {
        content: &quot;\e110&quot;;
      }

      .typcn-th-large-outline:before
      {
        content: &quot;\e111&quot;;
      }

      .typcn-th-large:before
      {
        content: &quot;\e112&quot;;
      }

      .typcn-th-list-outline:before
      {
        content: &quot;\e113&quot;;
      }

      .typcn-th-list:before
      {
        content: &quot;\e114&quot;;
      }

      .typcn-th-menu-outline:before
      {
        content: &quot;\e115&quot;;
      }

      .typcn-th-menu:before
      {
        content: &quot;\e116&quot;;
      }

      .typcn-th-small-outline:before
      {
        content: &quot;\e117&quot;;
      }

      .typcn-th-small:before
      {
        content: &quot;\e118&quot;;
      }

      .typcn-thermometer:before
      {
        content: &quot;\e119&quot;;
      }

      .typcn-thumbs-down:before
      {
        content: &quot;\e11a&quot;;
      }

      .typcn-thumbs-ok:before
      {
        content: &quot;\e11b&quot;;
      }

      .typcn-thumbs-up:before
      {
        content: &quot;\e11c&quot;;
      }

      .typcn-tick-outline:before
      {
        content: &quot;\e11d&quot;;
      }

      .typcn-tick:before
      {
        content: &quot;\e11e&quot;;
      }

      .typcn-ticket:before
      {
        content: &quot;\e11f&quot;;
      }

      .typcn-time:before
      {
        content: &quot;\e120&quot;;
      }

      .typcn-times-outline:before
      {
        content: &quot;\e121&quot;;
      }

      .typcn-times:before
      {
        content: &quot;\e122&quot;;
      }

      .typcn-trash:before
      {
        content: &quot;\e123&quot;;
      }

      .typcn-tree:before
      {
        content: &quot;\e124&quot;;
      }

      .typcn-upload-outline:before
      {
        content: &quot;\e125&quot;;
      }

      .typcn-upload:before
      {
        content: &quot;\e126&quot;;
      }

      .typcn-user-add-outline:before
      {
        content: &quot;\e127&quot;;
      }

      .typcn-user-add:before
      {
        content: &quot;\e128&quot;;
      }

      .typcn-user-delete-outline:before
      {
        content: &quot;\e129&quot;;
      }

      .typcn-user-delete:before
      {
        content: &quot;\e12a&quot;;
      }

      .typcn-user-outline:before
      {
        content: &quot;\e12b&quot;;
      }

      .typcn-user:before
      {
        content: &quot;\e12c&quot;;
      }

      .typcn-vendor-android:before
      {
        content: &quot;\e12d&quot;;
      }

      .typcn-vendor-apple:before
      {
        content: &quot;\e12e&quot;;
      }

      .typcn-vendor-microsoft:before
      {
        content: &quot;\e12f&quot;;
      }

      .typcn-video-outline:before
      {
        content: &quot;\e130&quot;;
      }

      .typcn-video:before
      {
        content: &quot;\e131&quot;;
      }

      .typcn-volume-down:before
      {
        content: &quot;\e132&quot;;
      }

      .typcn-volume-mute:before
      {
        content: &quot;\e133&quot;;
      }

      .typcn-volume-up:before
      {
        content: &quot;\e134&quot;;
      }

      .typcn-volume:before
      {
        content: &quot;\e135&quot;;
      }

      .typcn-warning-outline:before
      {
        content: &quot;\e136&quot;;
      }

      .typcn-warning:before
      {
        content: &quot;\e137&quot;;
      }

      .typcn-watch:before
      {
        content: &quot;\e138&quot;;
      }

      .typcn-waves-outline:before
      {
        content: &quot;\e139&quot;;
      }

      .typcn-waves:before
      {
        content: &quot;\e13a&quot;;
      }

      .typcn-weather-cloudy:before
      {
        content: &quot;\e13b&quot;;
      }

      .typcn-weather-downpour:before
      {
        content: &quot;\e13c&quot;;
      }

      .typcn-weather-night:before
      {
        content: &quot;\e13d&quot;;
      }

      .typcn-weather-partly-sunny:before
      {
        content: &quot;\e13e&quot;;
      }

      .typcn-weather-shower:before
      {
        content: &quot;\e13f&quot;;
      }

      .typcn-weather-snow:before
      {
        content: &quot;\e140&quot;;
      }

      .typcn-weather-stormy:before
      {
        content: &quot;\e141&quot;;
      }

      .typcn-weather-sunny:before
      {
        content: &quot;\e142&quot;;
      }

      .typcn-weather-windy-cloudy:before
      {
        content: &quot;\e143&quot;;
      }

      .typcn-weather-windy:before
      {
        content: &quot;\e144&quot;;
      }

      .typcn-wi-fi-outline:before
      {
        content: &quot;\e145&quot;;
      }

      .typcn-wi-fi:before
      {
        content: &quot;\e146&quot;;
      }

      .typcn-wine:before
      {
        content: &quot;\e147&quot;;
      }

      .typcn-world-outline:before
      {
        content: &quot;\e148&quot;;
      }

      .typcn-world:before
      {
        content: &quot;\e149&quot;;
      }

      .typcn-zoom-in-outline:before
      {
        content: &quot;\e14a&quot;;
      }

      .typcn-zoom-in:before
      {
        content: &quot;\e14b&quot;;
      }

      .typcn-zoom-out-outline:before
      {
        content: &quot;\e14c&quot;;
      }

      .typcn-zoom-out:before
      {
        content: &quot;\e14d&quot;;
      }

      .typcn-zoom-outline:before
      {
        content: &quot;\e14e&quot;;
      }

      .typcn-zoom:before
      {
        content: &quot;\e14f&quot;;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;h1&gt;Typicons &amp;middot; v2.1.0&lt;/h1&gt;
        &lt;p&gt;Typicons are free-to-use vector icons embedded in a webfont for easy use in your user interfaces, whether it be on the web or in a native application.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class=&quot;container&quot;&gt;
      &lt;div id=&quot;icons&quot;&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-adjust-brightness&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;adjust-brightness&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-adjust-contrast&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;adjust-contrast&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-anchor-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;anchor-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-anchor&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;anchor&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-archive&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;archive&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-back-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-back-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-back&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-back&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-down-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-down-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-down-thick&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-down-thick&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-down&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-down&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-forward-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-forward-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-forward&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-forward&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-left-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-left-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-left-thick&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-left-thick&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-left&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-left&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-loop-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-loop-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-loop&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-loop&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-maximise-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-maximise-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-maximise&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-maximise&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-minimise-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-minimise-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-minimise&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-minimise&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-move-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-move-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-move&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-move&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-repeat-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-repeat-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-repeat&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-repeat&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-right-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-right-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-right-thick&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-right-thick&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-right&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-right&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-shuffle&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-shuffle&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-sorted-down&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-sorted-down&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-sorted-up&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-sorted-up&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-sync-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-sync-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-sync&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-sync&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-unsorted&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-unsorted&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-up-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-up-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-up-thick&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-up-thick&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-arrow-up&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;arrow-up&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-at&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;at&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-attachment-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;attachment-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-attachment&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;attachment&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-backspace-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;backspace-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-backspace&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;backspace&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-battery-charge&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;battery-charge&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-battery-full&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;battery-full&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-battery-high&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;battery-high&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-battery-low&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;battery-low&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-battery-mid&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;battery-mid&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-beaker&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;beaker&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-beer&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;beer&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-bell&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;bell&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-book&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;book&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-bookmark&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;bookmark&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-briefcase&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;briefcase&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-brush&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;brush&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-business-card&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;business-card&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-calculator&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;calculator&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-calendar-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;calendar-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-calendar&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;calendar&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-camera-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;camera-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-camera&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;camera&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-cancel-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;cancel-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-cancel&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;cancel&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chart-area-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chart-area-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chart-area&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chart-area&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chart-bar-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chart-bar-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chart-bar&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chart-bar&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chart-line-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chart-line-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chart-line&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chart-line&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chart-pie-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chart-pie-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chart-pie&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chart-pie&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chevron-left-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chevron-left-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chevron-left&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chevron-left&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chevron-right-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chevron-right-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-chevron-right&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;chevron-right&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-clipboard&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;clipboard&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-cloud-storage&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;cloud-storage&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-cloud-storage-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;cloud-storage-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-code-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;code-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-code&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;code&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-coffee&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;coffee&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-cog-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;cog-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-cog&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;cog&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-compass&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;compass&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-contacts&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;contacts&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-credit-card&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;credit-card&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-css3&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;css3&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-database&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;database&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-delete-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;delete-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-delete&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;delete&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-device-desktop&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;device-desktop&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-device-laptop&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;device-laptop&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-device-phone&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;device-phone&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-device-tablet&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;device-tablet&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-directions&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;directions&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-divide-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;divide-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-divide&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;divide&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-document-add&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;document-add&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-document-delete&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;document-delete&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-document-text&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;document-text&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-document&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;document&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-download-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;download-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-download&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;download&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-dropbox&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;dropbox&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-edit&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;edit&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-eject-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;eject-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-eject&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;eject&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-equals-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;equals-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-equals&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;equals&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-export-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;export-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-export&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;export&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-eye-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;eye-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-eye&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;eye&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-feather&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;feather&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-film&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;film&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-filter&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;filter&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-flag-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;flag-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-flag&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;flag&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-flash-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;flash-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-flash&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;flash&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-flow-children&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;flow-children&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-flow-merge&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;flow-merge&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-flow-parallel&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;flow-parallel&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-flow-switch&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;flow-switch&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-folder-add&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;folder-add&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-folder-delete&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;folder-delete&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-folder-open&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;folder-open&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-folder&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;folder&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-gift&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;gift&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-globe-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;globe-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-globe&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;globe&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-group-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;group-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-group&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;group&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-headphones&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;headphones&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-heart-full-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;heart-full-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-heart-half-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;heart-half-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-heart-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;heart-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-heart&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;heart&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-home-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;home-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-home&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;home&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-html5&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;html5&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-image-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;image-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-image&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;image&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-infinity-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;infinity-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-infinity&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;infinity&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-info-large-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;info-large-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-info-large&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;info-large&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-info-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;info-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-info&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;info&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-input-checked-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;input-checked-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-input-checked&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;input-checked&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-key-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;key-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-key&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;key&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-keyboard&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;keyboard&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-leaf&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;leaf&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-lightbulb&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;lightbulb&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-link-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;link-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-link&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;link&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-location-arrow-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;location-arrow-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-location-arrow&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;location-arrow&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-location-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;location-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-location&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;location&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-lock-closed-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;lock-closed-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-lock-closed&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;lock-closed&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-lock-open-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;lock-open-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-lock-open&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;lock-open&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-mail&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;mail&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-map&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;map&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-eject-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-eject-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-eject&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-eject&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-fast-forward-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-fast-forward-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-fast-forward&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-fast-forward&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-pause-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-pause-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-pause&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-pause&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-play-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-play-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-play-reverse-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-play-reverse-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-play-reverse&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-play-reverse&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-play&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-play&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-record-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-record-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-record&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-record&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-rewind-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-rewind-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-rewind&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-rewind&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-stop-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-stop-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-media-stop&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;media-stop&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-message-typing&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;message-typing&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-message&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;message&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-messages&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;messages&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-microphone-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;microphone-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-microphone&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;microphone&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-minus-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;minus-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-minus&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;minus&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-mortar-board&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;mortar-board&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-news&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;news&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-notes-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;notes-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-notes&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;notes&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-pen&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;pen&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-pencil&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;pencil&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-phone-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;phone-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-phone&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;phone&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-pi-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;pi-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-pi&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;pi&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-pin-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;pin-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-pin&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;pin&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-pipette&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;pipette&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-plane-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;plane-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-plane&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;plane&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-plug&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;plug&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-plus-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;plus-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-plus&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;plus&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-point-of-interest-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;point-of-interest-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-point-of-interest&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;point-of-interest&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-power-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;power-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-power&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;power&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-printer&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;printer&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-puzzle-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;puzzle-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-puzzle&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;puzzle&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-radar-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;radar-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-radar&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;radar&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-refresh-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;refresh-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-refresh&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;refresh&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-rss-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;rss-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-rss&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;rss&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-scissors-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;scissors-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-scissors&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;scissors&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-shopping-bag&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;shopping-bag&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-shopping-cart&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;shopping-cart&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-at-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-at-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-dribbble-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-dribbble-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-dribbble&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-dribbble&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-facebook-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-facebook-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-facebook&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-facebook&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-flickr-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-flickr-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-flickr&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-flickr&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-github-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-github-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-github&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-github&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-google-plus-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-google-plus-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-google-plus&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-google-plus&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-instagram-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-instagram-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-instagram&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-instagram&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-last-fm-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-last-fm-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-last-fm&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-last-fm&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-linkedin-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-linkedin-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-linkedin&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-linkedin&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-pinterest-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-pinterest-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-pinterest&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-pinterest&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-skype-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-skype-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-skype&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-skype&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-tumbler-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-tumbler-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-tumbler&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-tumbler&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-twitter-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-twitter-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-twitter&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-twitter&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-vimeo-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-vimeo-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-vimeo&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-vimeo&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-youtube-circular&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-youtube-circular&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-social-youtube&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;social-youtube&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-sort-alphabetically-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;sort-alphabetically-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-sort-alphabetically&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;sort-alphabetically&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-sort-numerically-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;sort-numerically-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-sort-numerically&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;sort-numerically&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-spanner-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;spanner-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-spanner&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;spanner&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-spiral&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;spiral&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-star-full-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;star-full-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-star-half-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;star-half-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-star-half&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;star-half&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-star-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;star-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-star&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;star&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-starburst-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;starburst-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-starburst&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;starburst&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-stopwatch&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;stopwatch&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-support&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;support&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-tabs-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;tabs-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-tag&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;tag&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-tags&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;tags&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-th-large-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;th-large-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-th-large&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;th-large&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-th-list-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;th-list-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-th-list&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;th-list&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-th-menu-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;th-menu-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-th-menu&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;th-menu&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-th-small-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;th-small-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-th-small&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;th-small&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-thermometer&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;thermometer&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-thumbs-down&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;thumbs-down&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-thumbs-ok&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;thumbs-ok&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-thumbs-up&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;thumbs-up&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-tick-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;tick-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-tick&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;tick&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-ticket&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;ticket&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-time&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;time&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-times-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;times-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-times&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;times&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-trash&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;trash&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-tree&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;tree&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-upload-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;upload-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-upload&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;upload&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-user-add-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;user-add-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-user-add&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;user-add&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-user-delete-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;user-delete-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-user-delete&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;user-delete&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-user-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;user-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-user&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;user&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-vendor-android&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;vendor-android&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-vendor-apple&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;vendor-apple&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-vendor-microsoft&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;vendor-microsoft&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-video-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;video-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-video&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;video&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-volume-down&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;volume-down&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-volume-mute&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;volume-mute&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-volume-up&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;volume-up&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-volume&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;volume&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-warning-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;warning-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-warning&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;warning&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-watch&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;watch&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-waves-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;waves-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-waves&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;waves&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-cloudy&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-cloudy&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-downpour&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-downpour&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-night&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-night&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-partly-sunny&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-partly-sunny&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-shower&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-shower&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-snow&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-snow&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-stormy&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-stormy&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-sunny&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-sunny&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-windy-cloudy&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-windy-cloudy&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-weather-windy&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;weather-windy&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-wi-fi-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;wi-fi-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-wi-fi&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;wi-fi&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-wine&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;wine&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-world-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;world-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-world&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;world&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-zoom-in-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;zoom-in-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-zoom-in&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;zoom-in&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-zoom-out-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;zoom-out-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-zoom-out&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;zoom-out&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-zoom-outline&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;zoom-outline&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class=&quot;icon&quot;&gt;
          &lt;span class=&quot;typcn typcn-zoom&quot;&gt;&lt;/span&gt;
          &lt;span class=&#039;label&#039;&gt;zoom&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;footer&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;p&gt;Created by &lt;a href=&quot;https://www.s-ings.com&quot;&gt; Stephen Hutchings &lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/footer&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>        </div>
    </div>