Application toolkit - Static icons

Static icons styles.

Types

The most commonly used button styles.

Open this types static icons example in new window
Copy types static icons code 
<div class="flex flex-wrap gap-3 items-center">
  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-hs2-primary">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border-4 border-blue-100 bg-blue-200 text-hs2-primary">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-hs2-primary text-hs2-primary">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->
</div>
Close types static icons code

Sizes

Icons stacked small to large sizes.

Open this sizes static icons example in new window
Copy sizes static icons code 
<div class="flex flex-wrap gap-3 items-center">
  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[38px] h-[38px] rounded-full bg-hs2-primary text-white">
    <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-hs2-primary text-white">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[62px] h-[62px] rounded-full bg-hs2-primary text-white">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->
</div>
Close sizes static icons code

Solid color variants

Predefined solid color button styles.

Open this solid colour variants static icons example in new window
Copy solid colour variants static icons code 
<div class="flex flex-wrap gap-3 items-center">
  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-hs2-primary text-white dark:bg-white dark:text-gray-800">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-hs2-secondary text-white dark:bg-gray-700">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-hs2-info text-white">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-hs2-success text-white">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-hs2-warning text-white">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-hs2-danger text-white">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-white text-gray-600">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->
</div>
Close solid colour variants static icons code

Outline color variants

Predefined outline color button styles.

Open this outline colour variants static icons example in new window
Copy outline colour variants static icons code 
<div class="flex flex-wrap gap-3 items-center">
  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-hs2-primary text-hs2-primary dark:border-gray-200 dark:text-gray-200">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-hs2-secondary text-hs2-secondary">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-hs2-info text-hs2-info">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-hs2-success text-hs2-success">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-hs2-warning text-hs2-warning">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-hs2-danger text-hs2-danger">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full border border-white text-white">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->
</div>
Close outline colour variants static icons code

Ghost color variants

Predefined ghost color button styles.

Open this ghost colour variants static icons example in new window
Copy ghost colour variants static icons code 
<div class="flex flex-wrap gap-3 items-center">
  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-hs2-primary dark:text-gray-400">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-hs2-secondary">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-hs2-info">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-hs2-success">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-hs2-warning">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-hs2-danger">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="inline-flex justify-center items-center w-[46px] h-[46px] rounded-full text-white">
    <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z" />
    </svg>
  </span>
  <!-- End Icon -->
</div>
Close ghost colour variants static icons code

Circular Icon

Use the .rounded-full utility class to make avatars circular.

Open this circular static icons example in new window
Copy circular static icons code 
<div class="flex flex-wrap gap-2 items-center">
  <!-- Icon -->
  <span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-md bg-hs2-primary text-white">
    <svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M19.1042 5.95502C19.2066 5.85057 19.3288 5.76759 19.4636 5.71095C19.5984 5.6543 19.7432 5.62512 19.8895 5.62512C20.0357 5.62512 20.1805 5.6543 20.3153 5.71095C20.4502 5.76759 20.5723 5.85057 20.6747 5.95502C21.1037 6.38852 21.1097 7.08902 20.6897 7.53002L11.8202 18.015C11.7195 18.1256 11.5973 18.2145 11.4611 18.2762C11.3249 18.3379 11.1775 18.3712 11.0279 18.374C10.8784 18.3768 10.7299 18.3491 10.5914 18.2925C10.453 18.236 10.3275 18.1517 10.2227 18.045L4.82571 12.576C4.61757 12.3638 4.50098 12.0783 4.50098 11.781C4.50098 11.4837 4.61757 11.1983 4.82571 10.986C4.92808 10.8816 5.05026 10.7986 5.1851 10.7419C5.31993 10.6853 5.46471 10.6561 5.61096 10.6561C5.75722 10.6561 5.902 10.6853 6.03683 10.7419C6.17167 10.7986 6.29385 10.8816 6.39621 10.986L10.9742 15.6255L19.0742 5.98802C19.0835 5.97643 19.0936 5.96541 19.1042 5.95502Z" fill="currentColor" />
    </svg>
  </span>
  <!-- End Icon -->

  <!-- Icon -->
  <span class="m-1 inline-flex justify-center items-center w-[46px] h-[46px] rounded-full bg-hs2-primary text-white">
    <svg class="w-5 h-5" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M19.1042 5.95502C19.2066 5.85057 19.3288 5.76759 19.4636 5.71095C19.5984 5.6543 19.7432 5.62512 19.8895 5.62512C20.0357 5.62512 20.1805 5.6543 20.3153 5.71095C20.4502 5.76759 20.5723 5.85057 20.6747 5.95502C21.1037 6.38852 21.1097 7.08902 20.6897 7.53002L11.8202 18.015C11.7195 18.1256 11.5973 18.2145 11.4611 18.2762C11.3249 18.3379 11.1775 18.3712 11.0279 18.374C10.8784 18.3768 10.7299 18.3491 10.5914 18.2925C10.453 18.236 10.3275 18.1517 10.2227 18.045L4.82571 12.576C4.61757 12.3638 4.50098 12.0783 4.50098 11.781C4.50098 11.4837 4.61757 11.1983 4.82571 10.986C4.92808 10.8816 5.05026 10.7986 5.1851 10.7419C5.31993 10.6853 5.46471 10.6561 5.61096 10.6561C5.75722 10.6561 5.902 10.6853 6.03683 10.7419C6.17167 10.7986 6.29385 10.8816 6.39621 10.986L10.9742 15.6255L19.0742 5.98802C19.0835 5.97643 19.0936 5.96541 19.1042 5.95502Z" fill="currentColor" />
    </svg>
  </span>
  <!-- End Icon -->
</div>
Close circular static icons code