@ussebastian/kitdigital/docs/components/other/icons.html

Kit Digital de la Universidad San Sebastián

<section class="my-12 w-100">
  <div>
    <div class="h2 mb-12">uss-icon--xl</div>
    <div class="flex flex-wrap gap-24 mb-12">
      <i class="uss-icon uss-icon--xl ri-home-line"> </i
      ><i class="uss-icon uss-icon--xl ri-mail-line"> </i
      ><i class="uss-icon uss-icon--xl ri-chat-1-line"> </i
      ><i class="uss-icon uss-icon--xl ri-file-copy-line"> </i
      ><i class="uss-icon uss-icon--xl ri-add-line"> </i
      ><i class="uss-icon uss-icon--xl ri-subtract-line"> </i
      ><i class="uss-icon uss-icon--xl ri-arrow-left-circle-line"> </i
      ><i class="uss-icon uss-icon--xl ri-arrow-right-circle-line"> </i
      ><i class="uss-icon uss-icon--xl ri-arrow-left-s-line"> </i
      ><i class="uss-icon uss-icon--xl ri-arrow-right-s-line"> </i
      ><i class="uss-icon uss-icon--xl ri-information-line"> </i
      ><i class="uss-icon uss-icon--xl ri-star-line"> </i
      ><i class="uss-icon uss-icon--xl ri-close-line"> </i>
    </div>
  </div>
  <div>
    <div class="h2 mb-12">uss-icon--lg</div>
    <div class="flex flex-wrap gap-24 mb-12">
      <i class="uss-icon uss-icon--lg ri-home-line"> </i
      ><i class="uss-icon uss-icon--lg ri-mail-line"> </i
      ><i class="uss-icon uss-icon--lg ri-chat-1-line"> </i
      ><i class="uss-icon uss-icon--lg ri-file-copy-line"> </i
      ><i class="uss-icon uss-icon--lg ri-add-line"> </i
      ><i class="uss-icon uss-icon--lg ri-subtract-line"> </i
      ><i class="uss-icon uss-icon--lg ri-arrow-left-circle-line"> </i
      ><i class="uss-icon uss-icon--lg ri-arrow-right-circle-line"> </i
      ><i class="uss-icon uss-icon--lg ri-arrow-left-s-line"> </i
      ><i class="uss-icon uss-icon--lg ri-arrow-right-s-line"> </i
      ><i class="uss-icon uss-icon--lg ri-information-line"> </i
      ><i class="uss-icon uss-icon--lg ri-star-line"> </i
      ><i class="uss-icon uss-icon--lg ri-close-line"> </i>
    </div>
  </div>
  <div>
    <div class="h2 mb-12">uss-icon (default)</div>
    <div class="flex flex-wrap gap-24 mb-12">
      <i class="uss-icon ri-home-line"> </i><i class="uss-icon ri-mail-line"> </i
      ><i class="uss-icon ri-chat-1-line"> </i><i class="uss-icon ri-file-copy-line"> </i
      ><i class="uss-icon ri-add-line"> </i><i class="uss-icon ri-subtract-line"> </i
      ><i class="uss-icon ri-arrow-left-circle-line"> </i
      ><i class="uss-icon ri-arrow-right-circle-line"> </i
      ><i class="uss-icon ri-arrow-left-s-line"> </i><i class="uss-icon ri-arrow-right-s-line"> </i
      ><i class="uss-icon ri-information-line"> </i><i class="uss-icon ri-star-line"> </i
      ><i class="uss-icon ri-close-line"> </i>
    </div>
  </div>
  <div>
    <div class="h2 mb-12">uss-icon--sm</div>
    <div class="flex flex-wrap gap-24 mb-12">
      <i class="uss-icon ri-home-line"> </i><i class="uss-icon uss-icon--sm ri-mail-line"> </i
      ><i class="uss-icon uss-icon--sm ri-chat-1-line"> </i
      ><i class="uss-icon uss-icon--sm ri-file-copy-line"> </i
      ><i class="uss-icon uss-icon--sm ri-add-line"> </i
      ><i class="uss-icon uss-icon--sm ri-subtract-line"> </i
      ><i class="uss-icon uss-icon--sm ri-arrow-left-circle-line"> </i
      ><i class="uss-icon uss-icon--sm ri-arrow-right-circle-line"> </i
      ><i class="uss-icon uss-icon--sm ri-arrow-left-s-line"> </i
      ><i class="uss-icon uss-icon--sm ri-arrow-right-s-line"> </i
      ><i class="uss-icon uss-icon--sm ri-information-line"> </i
      ><i class="uss-icon uss-icon--sm ri-star-line"> </i
      ><i class="uss-icon uss-icon--sm ri-close-line"> </i>
    </div>
  </div>
  <div>
    <div class="h2 mb-12">uss-icon--xs</div>
    <div class="flex flex-wrap gap-24 mb-12">
      <i class="uss-icon uss-icon--xs ri-home-line"> </i
      ><i class="uss-icon uss-icon--xs ri-mail-line"> </i
      ><i class="uss-icon uss-icon--xs ri-chat-1-line"> </i
      ><i class="uss-icon uss-icon--xs ri-file-copy-line"> </i
      ><i class="uss-icon uss-icon--xs ri-add-line"> </i
      ><i class="uss-icon uss-icon--xs ri-subtract-line"> </i
      ><i class="uss-icon uss-icon--xs ri-arrow-left-circle-line"> </i
      ><i class="uss-icon uss-icon--xs ri-arrow-right-circle-line"> </i
      ><i class="uss-icon uss-icon--xs ri-arrow-left-s-line"> </i
      ><i class="uss-icon uss-icon--xs ri-arrow-right-s-line"> </i
      ><i class="uss-icon uss-icon--xs ri-information-line"> </i
      ><i class="uss-icon uss-icon--xs ri-star-line"> </i
      ><i class="uss-icon uss-icon--xs ri-close-line"> </i>
    </div>
  </div>
</section>