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.
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
HTML
<i class="fab fa-instagram fs-icon--instagram"></i>
Use Case
When communicating social link to Instagram.
HTML
<i class="fab fa-facebook fs-icon--facebook"></i>
Use Case
When communicating social link to Facebook.
HTML
<i class="fab fa-twitter fs-icon--twitter"></i>
Use Case
When communicating social link to twitter.