Icons

Arrows

Chevron - <derection>

HTML

<i class="fas fa-chevron-up"></i>

Use Case

Needs a defined use case

Arrow - <derection>

HTML

<i class="fas fa-arrow-up"></i>

Use Case

Needs a defined use case

Share

HTML

<i class="fas fa-share"></i>

Use Case

When content is design to be shared, use this icon.

Trend

CSS Class Name

.fs-icon--trend {
  transform: rotate(270deg);
}

HTML

<div class="fs-icon--trend">
  <i class="fas fa-play"></i>
</div>

Use Case

When you need to communicate a trend in some direction use this play icon and rotate it around relative to the directionality you need.

Core Site

Clock

HTML

<i class="fas fa-clock"></i>

Use Case

Use when communicating times.

Download

HTML

<i class="fas fa-download"></i>

Use Case

When something should be clicked to download.

Email

HTML

<i class="fas fa-envelope"></i>

Use Case

When communicating a link to an email or when asking for user's email.

Use Case

When something should be clicked to download.

Gallery

HTML

<i class="fas fa-images"></i>

Use Case

When communicating a link to more photos.

Edit

HTML

<i class="fas fa-pen"></i>

Use Case

When you need to display the ability to make changes.

Social

Instagram

HTML

<i class="fab fa-instagram fs-icon--instagram"></i>

Use Case

When communicating social link to Instagram.

Facebook

HTML

<i class="fab fa-facebook fs-icon--facebook"></i>

Use Case

When communicating social link to Facebook.

Twitter

HTML

<i class="fab fa-twitter fs-icon--twitter"></i>

Use Case

When communicating social link to twitter.

Question

Anything need to be added here?!

Share your feedback