Cirrus

A trash can should delete; a check signifies yes. Our iconography is lean, clearly legible from a distance (desktop and mobile), and immediately recognizable.

Almost always, it’s a good idea to have a very short label describing the icon. Do not break standard functionality (putting a checkbox on a radio button), or have an icon do something unexpected or against the norm (a plus sign deleting, for example). We use Font Awesome with a mixture of light and regular styles. The mixture is often informed by role, such as actionable or informational.

System Icons

Navigation

Main navigational elements control a majority of the functionality in the header as well as providing controls throughout the site. These are items that will often be clicked on, used in buttons, or otherwise signifying an action that can occur.

<i class="far fa-shopping-cart"></i>

<i class="fal fa-user-circle"></i>

<i class="far fa-search"></i>

<i class="fal fa-times"></i>

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

<i class="fal fa-cog"></i>

<i class="far fa-bars"></i>

<i class="far fa-trash-alt"></i>

<i class="fas fa-expand-alt"></i>

<i class="fal fa-paper-plane"></i>

File Type and Action Icons

File type and action icons are used for quick glances, to alert the user what can be done, or what type of file can be used with a specific action. Because of their somewhat nebulous nature, they will almost always need a label explaining what they are. While these icons might feel familiar to most users, we strive to serve all users, and signposting through labels to aid in understanding is an accessibility feature.

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

<i class="fal fa-phone"></i>

<i class="fal fa-fax"></i>

<i class="fal fa-file"></i>

<i class="fal fa-file-image"></i>

<i class="fal fa-file-word"></i>

<i class="fal fa-file-times"></i>

<i class="fal fa-file-pdf"></i>

<i class="fal fa-clipboard-list-check"></i>

<i class="fal fa-chart-line"></i>

<i class="fal fa-folder-open"></i>

<i class="fal fa-credit-card"></i>

<i class="fal fa-file-invoice-dollar"></i>

<i class="fal fa-list"></i>

Directional Controls

These elements are used mostly for two places: navigating between elements on-screen; and sorting tables. Chevrons and angles show in what direction the page or element will move. The size of the element will drive which what is appropriate to use. Bigger elements, like the main carousel on the LennoxPros landing page, uses chevrons. The smaller, more compact navigation, like in the pagination button, uses the angle.

Elements like sort or long arrows are used in tables to show which column is being actively sorted and in what order.

<i class="far fa-chevron-left"></i>

<i class="far fa-chevron-right"></i>

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

<i class="far fa-chevron-down"></i>

<i class="fal fa-angle-double-left"></i>

<i class="fal fa-angle-left"></i>

<i class="fal fa-angle-right"></i>

<i class="fal fa-angle-double-right"></i>

<i class="fal fa-sort"></i>

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

<i class="far fa-long-arrow-up"></i>

<i class="far fa-long-arrow-down"></i>

Control Icons

Control icons have a specific interaction when clicked. Similar to the controls above, knowability of the icon in question might be questionable, so a useful and clear label is almost always advisable. Things like calendars, affirmative checks, and filters might have a higher success rate, but actions like scroll to bottom or even plus/minus or calendars might provoke a pause. Remember: even 1 second of paused momentum on a website has a huge negative effect, so label with clear actions.

<i class="fal fa-calendar-alt"></i>

<i class="far fa-arrow-to-bottom"></i>

<i class="fal fa-filter"></i>

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

<i class="fal fa-plus-square"></i>

<i class="fal fa-minus-square"></i>

<i class="fal fa-chevron-square-right"></i>

<i class="far fa-external-link"></i>

Alert Icons

We have standard alert icons, but these communicative symbols can be used elsewhere. Make sure to match the alert icon with the message being displayed, like an informational message versus a system warning.

<i class="far fa-bell"></i>

<i class="far fa-check-circle"></i>

<i class="far fa-exclamation-circle"></i>

<i class="far fa-exclamation-triangle"></i>

<i class="far fa-info-circle"></i>

<i class="fas fa-info-circle"></i>

<i class="far fa-question-circle"></i>

Social Icons

We use filled in social icons, as they mostly live in the footer which is a solid background color. Make sure to reference the specific social media page, and as things change, make sure to add/remove relevant social media companies/sites. For example, we probably don’t need a Lennox TikTok, as wild and weird as that might be.

<i class="fab fa-facebook-square"></i>

<i class="fab fa-linkedin"></i>

<i class="fab fa-twitter-square"></i>