Icons

Rebrand Additions

<i class="icon icon--medium icon--camera"></i>
<i class="icon icon--medium icon--text-document"></i>
<i class="icon icon--medium icon--text-document-out"></i>
<i class="icon icon--medium icon--headphones"></i>
<i class="icon icon--medium icon--headphones-out"></i>
<i class="icon icon--medium icon--play-arrow"></i>
<i class="icon icon--medium icon--rotate-ccw"></i>
<i class="icon icon--medium icon--arrow-right"></i>
<i class="icon icon--medium icon--arrow-up-right"></i>
<i class="icon icon--medium icon--shopping-bag"></i>
<i class="icon icon--medium icon--shopping-bag-out"></i>
<i class="icon icon--medium icon--muted-speaker"></i>
<i class="icon icon--medium icon--unmuted-speaker"></i>
<i class="icon icon--medium icon--x"></i>
<i class="icon icon--medium icon--telephone"></i>
<i class="icon icon--medium icon--mail"></i>
<i class="icon icon--medium icon--brand-facebook"></i>
<i class="icon icon--medium icon--brand-twitter"></i>
<i class="icon icon--medium icon--brand-instagram"></i>
<i class="icon icon--medium icon--brand-tiktok"></i>
<i class="icon icon--medium icon--brand-youtube"></i>

Search Transformer icon

<a class="search-icon">
  <span class="circle"></span>
  <span class="handle"></span>
</a>

Resources

<i class="icon icon--medium icon--play"></i >
<i class="icon icon--medium icon--replay"></i>
<i class="icon icon--medium icon--audio"></i>
<i class="icon icon--medium icon--ext-link"></i>
<i class="icon icon--medium icon--photo"></i>

Arrows

<article class="icons-example">
  <i class="icon icon--medium icon--next-medium"></i>
  <i class="icon icon--medium icon--prev-medium"></i>
  <i class="icon icon--medium icon--next-red-medium"></i>
  <i class="icon icon--medium icon--prev-red"></i>
  <i class="icon icon--medium icon--next-dark-red"></i>
  <i class="icon icon--medium icon--prev-dark-red"></i>
  <i class="icon icon--medium icon--next-dark-grey"></i>
  <i class="icon icon--medium icon--prev-dark-grey"></i>
  <i class="icon icon--medium icon--next-grey"></i>
  <i class="icon icon--medium icon--prev-grey"></i>
  <i class="icon icon--medium icon--down-white"></i>
  <i class="icon icon--medium icon--up-white"></i>
  <i class="icon icon--medium icon--down"></i>
  <i class="icon icon--medium icon--up"></i>
  <i class="icon icon--medium icon--triangle-right-black"></i>
  <i class="icon icon--medium icon--triangle-right-white"></i>
  <i class="icon icon--medium icon--triangle-right-white-outline"></i>
  <i class="icon icon--medium icon--down-arrow"></i>
  <i class="icon icon--medium icon--up-arrow"></i>
  <i class="icon icon--medium icon--down-arrow-white"></i>
  <i class="icon icon--medium icon--up-arrow-white"></i>
  <i class="icon icon--medium icon--down-arrow-red"></i>
  <i class="icon icon--medium icon--up-arrow-red"></i>
  <i class="icon icon--medium icon--down-arrow-red"></i>
  <i class="icon icon--medium icon--up-arrow-red"></i>
  <i class="icon icon--medium icon--down-arrow-black"></i>
  <i class="icon icon--medium icon--up-arrow-black"></i>
  <i class="icon icon--medium icon--down-arrow-black"></i>
  <i class="icon icon--medium icon--up-arrow-black"></i>
</article>

Misc

<article class="icons-example">
  <i class="icon icon--medium icon--close"></i>
  <i class="icon icon--medium icon--check-alt"></i>
  <i class="icon icon--medium icon--check-alt-grey"></i>
  <i class="icon icon--medium icon--envelope"></i>
  <i class="icon icon--medium icon--check-mark"></i>
  <i class="icon icon--medium icon--check-mark-white"></i>
  <i class="icon icon--medium icon--list--rounded"></i>
  <i class="icon icon--medium icon--search"></i>
  <i class="icon icon--medium icon--phone"></i>
</article>

Devices

<article class="icons-example" style="background:0">
  <i class="icon icon--devices"></i>
  <i class="icon icon--devices-xl-tv"></i>
  <i class="icon icon--devices-xl-computer"></i>
  <i class="icon icon--devices-xl-mobile"></i>
</article>

Sizes

  <i class="icon icon--small icon--next"></i>
  <i class="icon icon--small icon--play"></i>
  <i class="icon icon--medium icon--next-medium"></i>
  <i class="icon icon--medium icon--play"></i>
  <i class="icon icon--large icon--next-large"></i>
  <i class="icon icon--large icon--play"></i>

logos

<article class="icons-example">
  <i class="icon icon--small icon--sho-app-logo"></i>
  <i class="icon icon--medium icon--sho-app-logo"></i>
  <i class="icon icon--large icon--sho-app-logo"></i>
  <i class="icon icon--large icon--sports-banner"></i>
</article>