Skip to content

Icons

Arrows

Chevron - <derection>


HTML

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

Use Case

Needs a defined use case

Arrow - <derection>


HTML

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

Use Case

Needs a defined use case

Share


HTML

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

Use Case

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

Trend


CSS Class Name

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

HTML

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

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

Use Case

Use when communicating times.

Download


HTML

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

Use Case

When something should be clicked to download.

Email


HTML

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

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

Use Case

When communicating a link to more photos.

Edit


HTML

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

Use Case

When you need to display the ability to make changes.

Social

Instagram


HTML

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

Use Case

When communicating social link to Instagram.

Facebook


HTML

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

Use Case

When communicating social link to Facebook.

Twitter


HTML

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

Explore and learn. Released under the MIT License.