Arches: Icon Dictionary

Multi Product Brand Style System by the American College of Cardiology

This is the dictionary of Icons, Labels and Terms used at the American College of Cardiology. This document is constantly updated and is a reference for the Teams that work on ACC properties and projects.

Font Awesome Documentation

Exception Rules

Accreditation Services

Icon: fa-award
synonyms accreditation, award,

Usage Accreditation Content

Code Example
<i class="far fa-award"><⁄i>

Action Plan

synonyms  , file-signature,

Usage Multi-page booklet that includes information about how to manage a health condition or initiate a medication, with input areas to record progress or goals.

Example Location(s) location 1 location 2
Code Example
<i class="far fa-file-signature"><⁄i>

Add, New

Icon: fa-plus
synonyms new, another, expand, plus,

Usage Used in buttons - the plus icon is combined with "Add [new item being added]". For example: "Add User"

Example Location(s) location 1
Code Example
<i class="far fa-plus"><⁄i>
Code Example Missing Icon Information

Announcement

Icon: fa-megaphone
synonyms section news, updates, megaphone,

Usage Time sensitive messages that are not evergreen news.

Code Example
<i class="far fa-megaphone"><⁄i>

Apps & Tools

Stacked Icon: fa-mobile-alt fa-heart
synonyms applications, mobile-alt, heart,

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Example Location(s) location 1
Code Example
<span class="fa-stack">
	<i class="fa-mobile-alt fas fa-stack-2x"></i>
	<i style="font-size: 50%;top: -9%;" class="fa-heart  fas c_primary fa-stack-1x"></i>
</span>

Audio

synonyms sound clip, listen, headphones,

Usage The audio icon is often placed, with the title of the file. Audio files include but are not limited to podcast, mp3, or wav.

Example Location(s) location 1
Code Example
<i class="far fa-headphones"><⁄i>

Award

Icon: fa-trophy

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Example Location(s) location 1
Code Example
<i class="far fa-trophy"><⁄i>

Bookmark

Icon: fa-bookmark
synonyms save to library, bookmark,

Usage  Appears when an item is saved to library

Example Location(s) location 1
Code Example
<i class="far fa-bookmark"><⁄i>

Brute Force Lock

Stacked Icon: fa-lock fa-ban

Usage Icon to use that the users authentication has been revoked because they have had too many failed attempts. This icon is always an alert state.

Code Example
<span class="fa-stack">
	<i class="fa-lock fas fa-stack-2x"></i>
	<i style="top: 20%;font-size: 75%;" class="fa-ban far c_white fa-stack-1x"></i>
</span>

Career & Practice Resources

Stacked Icon: fa-clipboard fa-tasks
synonyms resources, clipboard, tasks,

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Example Location(s) location 1
Code Example
<span class="fa-stack">
	<i class="fa-clipboard fas fa-stack-2x"></i>
	<i style="top: 15%;font-size: 85%;" class="fa-tasks far c_white fa-stack-1x"></i>
</span>

Cart

synonyms shopping cart, bag, shopping bag, basket, shopping basket, shopping-cart,

Usage Signifies the user's products or potential purchases when signed into acc.org

Example Location(s) location 1
Code Example
<i class="far fa-shopping-cart"><⁄i>

Certificate Program

Usage The primary purpose of an assessment-based certificate program is on facilitating the accomplishment of the intended learning outcomes by providing education and training that supports the accomplishment of intended learning outcomes.

Code Example Missing Icon Information

Chapter Meetings

Example Location(s) location 1
Code Example Missing Icon Information

Clinical Toolkit

Stacked Icon: fa-box fa-tools
synonyms toolkit, box, tools,

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Code Example
<span class="fa-stack">
	<i class="fa-box far fa-stack-2x"></i>
	<i style="top: 22%;font-size: 75%;" class="fa-tools fas c_white fa-stack-1x"></i>
</span>
Code Example
<i class="far fa-microscope"><⁄i>

Collapse

Icon: fa-minus
synonyms minimize, hide, minus,

Usage In combination with the "Expand" icon, these icons toggle to reflect the opposite state of complex content - such as navigation and sections of content.

Code Example
<i class="far fa-minus"><⁄i>

Credit

synonyms certificate, file-certificate,

Usage When denoting the types of education credits or certificates that are attached to a content item.

Code Example
<i class="far fa-file-certificate"><⁄i>

Decision Aid

Icon: fa-sitemap
synonyms  , sitemap,

Usage Decision Aid: Multi-page booklet or video to support shared decision-making.

Example Location(s) location 1 location 2
Code Example
<i class="far fa-sitemap"><⁄i>

Discussion Guide

synonyms  , user-md-chat,

Usage Multi-page booklet for clinician to use with patient to learn about a topic.

Code Example
<i class="far fa-user-md-chat"><⁄i>

Down Voted

synonyms unliked, disapproved, disliked, thumbs-down,
Code Example
<i class="far fa-thumbs-down"><⁄i>

Download

synonyms save local copy, save to disk, save to drive, arrow-to-bottom,

Usage This icon must always be connected to the name of the file type it is downloading. This can either be the title of the file or the type of file. For example: (Download) The complications of the heart, or (Download) Presentation

Example Location(s) location 1 location 2
Code Example
<i class="far fa-arrow-to-bottom"><⁄i>

Drill and Practice

Usage Drill & Practice products feature 3 convenient modes: Learn Mode: Provides an overview of the topic. Drill/Practice Mode: Includes “flash cards” that you can use to reinforce & apply what you learned in the Learn section. Turn each card over to see the answer and explanation. Perform Mode: Practice by answering multiple choice questions featuring case-based scenarios. Receive detailed commentary on how your answer compares to the experts’.

Example Location(s) location 1
Code Example Missing Icon Information

Editor in Chief

synonyms editor, editorial board, users-medical,
Code Example
<i class="far fa-users-medical"><⁄i>

Editors Pick

Icon: fa-thumbs-up
synonyms approved, liked, up voted, thumbs-up,

Usage  Signifies that content (typically an article, jscan, etc.) is picked by the editor of ACC.org

Example Location(s) location 1
Code Example
<i class="far fa-thumbs-up"><⁄i>

Education

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Example Location(s) location 1
Code Example Missing Icon Information

Educational Activities,

synonyms Education, university,

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Example Location(s) location 1 location 2
Code Example
<i class="far fa-university"><⁄i>

Event, Date

synonyms calendar, calendar-alt,

Usage  Signifies the date of an event

Code Example
<i class="far fa-calendar-alt"><⁄i>

Expand

Icon: fa-plus
synonyms show, maximize, more, plus,

Usage In combination with the "Collapse" these icons toggle to reflect the opposite state of complex content - such as navigation, and sections of content.

Example Location(s) location 1
Code Example
<i class="far fa-plus"><⁄i>

Expert Analysis

Usage Either a written or video format in which one or more experts teaches a topic

Code Example
<i class="far fa-user-chart"><⁄i>

Facebook

synonyms  , facebook-square,

Usage Icon representation of the social network

Code Example
<i class="fab fa-facebook-square"><⁄i>

Fact Sheet

synonyms  , ballot-check,

Usage One page, mostly text, explains key information about a topic.

Example Location(s) location 1
Code Example
<i class="far fa-ballot-check"><⁄i>

Filter

Icon: fa-filter
synonyms refine, filter,

Usage This icon are usually combined with the word filter

Example Location(s) location 1
Code Example
<i class="far fa-filter"><⁄i>

Font Size

Icon: fa-text-size
synonyms text size, text-size,

Usage This is a set of 3 icons in one - the user can click on each A, and the font-size will change accordingly

Example Location(s) location 1
Code Example
<i class="far fa-text-size"><⁄i>

Generic Article

synonyms  , file-medical-alt,

Usage Any news or editorial article that doesn't fit into the specialized sub article types

Example Location(s) location 1
Code Example
<i class="far fa-file-medical-alt"><⁄i>

Google Play

Usage Icon representation of the social network

Example Location(s) location 1
Code Example
<i class="fab fa-google-play"><⁄i>

Guideline

synonyms recomendation, rule, Guideline Education, , book-medical,

Usage Capital "G" guidelines

Code Example
<i class="far fa-book-medical"><⁄i>

Guideline Hub

Icon: fa-hubspot
synonyms Hub, hubspot,

Usage Guideline hub icon, appears on the guideline search listing page - links to hub for the particular guideline it appears next to

Example Location(s) location 1
Code Example
<i class="fab fa-hubspot"><⁄i>

Home

Icon: fa-home

Usage Links to homepage on ACC.org - appears in top line navigation

Example Location(s) location 1
Code Example
<i class="fas fa-home"><⁄i>

image

Icon: fa-image
synonyms graphic, picture, photo, image,

Usage Signifies that the object is an image file

Example Location(s) location 1 location 2
Code Example
<i class="far fa-image"><⁄i>

Infographic

synonyms poster, printable flier, file-chart-pie,

Usage One page, mostly images, that explains a health topic. Can be printed as a handout or posted on the wall.

Example Location(s) location 1
Code Example
<i class="far fa-file-chart-pie"><⁄i>

Instagram

synonyms  , instagram-square,

Usage Icon representation of the social network

Code Example
<i class="fab fa-instagram-square"><⁄i>

iTunes

Icon: fa-itunes

Usage Icon representation of the social network

Example Location(s) location 1
Code Example
<i class="fab fa-itunes"><⁄i>

JACC Journals CME/MOC/ECME

Icon: fa-book-open

Usage JACC Icon is used in the guidelines search listing, signifiying a link to the JACC guideline article

Example Location(s) location 1
Code Example
<i class="far fa-book-open"><⁄i>

Less

synonyms collapse, read less, hide, chevron-up,

Usage In combination with the "More" icon this icon toggles simple text content by showing less of the content

Code Example
<i class="far fa-chevron-up"><⁄i>

LinkedIn

Icon: fa-linkedin
synonyms  , linkedin,

Usage Icon representation of the social network

Code Example
<i class="fab fa-linkedin"><⁄i>

List bullets

Usage We use browser rendered bullets and do not inlcude an alternate version for consistency.

Example Location(s) location 1
Code Example Missing Icon Information

LIve

Icon: fa-video
synonyms live stream, video in progress, video,

Usage Icon that denotes if a presentation is currently or will be "live/live streamed"

Code Example
<i class="far fa-video"><⁄i>

Lock

Icon: fa-lock
synonyms secure, lock,

Usage Signifies content that requires a login to view. Appears after text.

Example Location(s) location 1
Code Example
<i class="far fa-lock"><⁄i>

Login

Icon: fa-sign-in
synonyms sign-in, sign-in,

Usage used in main nav that denotes how a user will log into the ACC systems.

Example Location(s) location 1
Code Example
<i class="far fa-sign-in"><⁄i>

Logout

Icon: fa-sign-out
synonyms sign-out, log out, sign out, sign-out,

Usage used in main nav that denotes how a user will log out of the ACC systems.

Example Location(s) location 1
Code Example
<i class="far fa-sign-out"><⁄i>

Meeting on Demand

Stacked Icon: fa-calendar fa-play-circle
synonyms past meeting, meeting recording, calendar, play-circle,

Usage ACC’s Meeting on DemandTM Programs allow busy cardiovascular practitioners to participate in educational courses from the convenience of their home or office.  They feature education in a user-friendly online lecture format featuring synchronized slides, video and audio, supplemented by self-assessment questions.  

Code Example
<span class="fa-stack">
	<i class="fa-calendar fas fa-stack-2x"></i>
	<i style="top: 16%;font-size: 86%;" class="fa-play-circle fas c_white fa-stack-1x"></i>
</span>

Meetings

synonyms Conference, meetup, live meeting, calendar-day,

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Example Location(s) location 1
Code Example
<i class="far fa-calendar-day
"><⁄i>

Member Hub

Usage Icon representation of MH

Example Location(s) location 1
Code Example Missing Icon Information

Message

Icon: fa-envelope
synonyms send message, email, chat, envelope,
Example Location(s) location 1 location 2 location 3
Code Example
<i class="far fa-envelope"><⁄i>

Micro Learning

Stacked Icon: fa-search fa-book-reader
synonyms quick tips, quick reference, search, book-reader,

Usage Short quick learning that can be done in less then 5 min.

Example Location(s) location 1
Code Example
<span class="fa-stack">
	<i class="fa-search far fa-stack-2x"></i>
	<i style="top: -8%;font-size: 85%;left: -7%;" class="fa-book-reader  fas c_primary fa-stack-1x"></i>
</span>

My Account

synonyms me, my, user-circle,
Example Location(s) location 1
Code Example
<i class="far fa-user-circle"><⁄i>

News Article

Icon: fa-newspaper
synonyms news, newspaper,

Usage A news article that is an update or newsworthy

Example Location(s) location 1
Code Example
<i class="far fa-newspaper"><⁄i>

Notification

Icon: fa-bell
synonyms alert, bell,
Example Location(s) location 1
Code Example
<i class="far fa-bell"><⁄i>

On Demand

synonyms pre recored, on demand, direct access, rectangle-wide, play-circle,

Usage Icon that denotes if a presentation is currently or will be "on demand"

Code Example
<span class="fa-stack">
	<i class="fa-rectangle-wide far fa-stack-2x"></i>
	<i style="font-size:80%" class="fa-play-circle fas c_primary fa-stack-1x"></i>
</span>

Online Course

synonyms Digital Learning, Online Educaiton, Online Learning, Self-Paced Learning, browser, graduation-cap,

Usage Educational materials that can be done 100% online and on demand. This type of education may or may not reward credits.

Example Location(s) location 1
Code Example
<span class="fa-stack">
	<i class="fa-browser far fa-stack-2x"></i>
	<i style="top: 7%;font-size: 90%;" class="fa-graduation-cap  fas c_primary fa-stack-1x"></i>
</span>

Patient Case Quizzes

Usage A format used to test knowledge for both formative or summative assessments. Quizzes are usually brief, ie one or two questions

Code Example
<i class="far fa-notes-medical"><⁄i>

Patient Resources

Stacked Icon: fa-clipboard fa-user
synonyms resources, clipboard, user,

Usage Used for CardioSmart and other resources that focus on the patient

Example Location(s) location 1
Code Example
<span class="fa-stack">
	<i class="fa-clipboard fas fa-stack-2x"></i>
	<i style="top: 10%;font-size: 80%;" class="fa-user fas c_white fa-stack-1x"></i>
</span>

Patient/Survivor Story

synonyms  , address-card,

Usage An article or essay that is focus on or in the words of a patient

Code Example
<i class="far fa-address-card"><⁄i>

PDF

Icon: fa-file-pdf
synonyms document, file-pdf,

Usage Used to signifiy a link to a PDF, can appear on it's own or after linked text (ala the external link icon)

Example Location(s) location 1
Code Example
<i class="far fa-file-pdf"><⁄i>

Perspectives (Guidelines commentary)

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Example Location(s) location 1
Code Example Missing Icon Information

Player FM

Usage Icon representation of Player FM

Example Location(s) location 1
Code Example Missing Icon Information

Podcast

Icon: fa-podcast

Usage Icon representation of podcasts

Code Example
<i class="far fa-podcast"><⁄i>

Print

Icon: fa-print

Usage When clicked, user's print dialogue opens

Example Location(s) location 1
Code Example
<i class="far fa-print"><⁄i>

Quality Campaign

synonyms campaign,

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Code Example Missing Icon Information

Registered

synonyms purchased, check-circle,

Usage  Signifies that an item was purchased, or an event was registered for

Code Example
<i class="far fa-check-circle"><⁄i>

Registry

Stacked Icon: fa-file fa-cog
synonyms NCDR, file, cog,

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Code Example
<span class="fa-stack">
	<i class="fa-file far fa-stack-2x"></i>
	<i style="top: 10%;font-size: 90%;" class="fa-cog fas c_primary fa-stack-1x"></i>
</span>

Remove, Cancel, Clear

Icon: fa-times
synonyms delete, close, exit, times,

Usage Used in buttons, the times icon is combined in two ways: either with "Cancel" or with the word "Remove or Delete" + [the item being removed]. For Example "Remove User"

Example Location(s) location 1 location 2
Code Example
<i class="far fa-times"><⁄i>

Report

synonyms warning, exclamation-triangle,
Example Location(s) location 1
Code Example
<i class="far fa-exclamation-triangle"><⁄i>

Risk Calculator

synonyms  , calculator,

Usage SPA (Single Page Application) that helps a user understand their risk for a condition.

Code Example
<i class="far fa-calculator"><⁄i>

RSS

Usage Icon representation of a rss feed

Example Location(s) location 1
Code Example
<i class="far fa-rss-square"><⁄i>

Section News

Icon: fa-scroll

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Example Location(s) location 1
Code Example
<i class="far fa-scroll"><⁄i>

Self-Paced Learning

synonyms modules, Online Course, Online Learning, book-reader,

Usage Self-paced learning means you can learn in your own time and schedule. This is not format-dependent, rather how you consume the activity. If more this more than one self- paced activity, it sould be described as an Online Course.

Example Location(s) location 1
Code Example
<i class="far fa-book-reader"><⁄i>

Self-Assessment Programs

Usage SAPs are ACC's most comprehensive educational offering. Each SAP provides a core curriculum on a specific area of cardiovascular medicine. SAPs include education in a variety of formats, including text, video presentations and audio presentations. They also include hundreds of multiple-choice questions that allow the user to apply what they learned and identify knowledge gaps.

Example Location(s) location 1
Code Example Missing Icon Information

Service Glossary

Usage This a link to the services glossary which is a glossary that provides descriptions and other names for the cardiac services and medications you can search for in the Find Your Heart a Home tool.

Example Location(s) location 1
Code Example Missing Icon Information

Share

synonyms send to, , share-square,

Usage Used in articles and landing pages with shareable information. The icon will pop-up a dialogue that will allow the user to share through email or social media.

Example Location(s) location 1
Code Example
<i class="far fa-share-square"><⁄i>

Slideshow, Slides

synonyms PowerPoint, Deck, Slide Deck, slideshare,

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Example Location(s) location 1 location 2 location 3
Code Example
<i class="fab fa-slideshare"><⁄i>

Round Table

Usage Used in publications for round tables

Code Example
<span class="fa-stack">
	<i class="fa-circle fas fa-stack-2x"></i>
	<i style="top:0%;font-size:150%;left:16%;" class="fa-comments fas c_primary fa-stack-1x"></i>
	<i style="top:0%;font-size:160%;left:16%;" class="fa-comments fal c_white fa-stack-1x"></i>
	<i style="font-size:70%;top:-9%;left:7%;" class="fa-ellipsis-h fas c_white fa-stack-1x"></i>
</span>

Sort

Icon: fa-sort
synonyms arrange, order, sort,
Example Location(s) location 1
Code Example
<i class="far fa-sort"><⁄i>

Sound

Icon: fa-volume
synonyms volume, listen, volume,

Usage Signifies the ability to adjust volume

Code Example
<i class="far fa-volume"><⁄i>

Sound Off

synonyms volume off, mute, volume-mute,

Usage Signifies the ability to mute the audio file

Code Example
<i class="far fa-volume-mute"><⁄i>

Time

Icon: fa-clock
synonyms  , clock,

Usage When a content object specifically only shows the time this icon is used.

Code Example
<i class="far fa-clock"><⁄i>

Tooltip

Icon: fa-question
synonyms assistance, question, ask, help, information, view more info, question,

Usage Appears next to content that has a tooltip

Example Location(s) location 1
Code Example
<i class="far fa-question"><⁄i>

Twitter

synonyms  , twitter-square,

Usage Icon representation of the social network

Example Location(s) location 1
Code Example
<i class="fab fa-twitter-square"><⁄i>

Upload

synonyms add image, add file, arrow-to-top,

Usage This icon must always be connected to the expected asset to uploaded. For example: (Upload) image

Code Example
<i class="far fa-arrow-to-top"><⁄i>

User

Icon: fa-user
synonyms member, user,

Usage  Icon representation of a user

Code Example
<i class="far fa-user"><⁄i>

Users

Icon: fa-users
synonyms members, group, people, users,

Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.

Code Example
<i class="far fa-users"><⁄i>

Video

synonyms stream, photo-video,

Usage  Signifies a video that's not a webinar

Example Location(s) location 1
Code Example
<i class="far fa-photo-video"><⁄i>

View Password

Icon: fa-eye
synonyms show password, reveal password, eye,

Usage In login, appears after password entry form. When clicked the user will be able to see their password instead of bullets hiding actual characters

Example Location(s) location 1
Code Example
<i class="far fa-eye"><⁄i>

Views

Icon: fa-eye
synonyms Show Password, eye,
Example Location(s) location 1
Code Example
<i class="far fa-eye"><⁄i>

Webinar

synonyms  event, virtual meeting, online session, stream, video, desktop-alt,

Usage Webinar events that are upcoming or are on-demand

Code Example
<i class="far fa-desktop-alt"><⁄i>

Worksheet

Icon: fa-tasks

Usage One page, mostly text, with input areas to record progress or work done.

Code Example
<i class="far fa-tasks"><⁄i>

YouTube

Usage Icon representation of the social network

Code Example
<i class="fab fa-youtube-square"><⁄i>
Code Example
<span class="fa-stack">
	<i class="fa-badge fas fa-stack-2x"></i>
	<i style="font-size:85%" class="fa-book-reader  fas c_white fa-stack-1x"></i>
</span>

Advocacy

Usage ACC.21 Booth Page

Code Example
<i class="far fa-balance-scale"><⁄i>

Global Initiatives

Icon: fa-globe

Usage ACC.21 Booth Page

Code Example
<i class="far fa-globe"><⁄i>

Covid19

Icon: fa-virus

Usage ACC.21 Booth Page

Code Example
<i class="far fa-virus"><⁄i>

Quality Programs

Usage ACC.21 Booth Page

Code Example
<i class="far fa-badge-check"><⁄i>

Resources

Stacked Icon: fa-clipboard fa-heart
synonyms resources, clipboard, heart,
Code Example
<span class="fa-stack">
	<i class="fa-clipboard fas fa-stack-2x"></i>
	<i style="font-size: 70%;top: 18%;" class="fa-heart fas c_white fa-stack-1x"></i>
</span>
Code Example
<span class="fa-stack">
	<i class="fa-tablet fas fa-stack-2x"></i>
	<i style="font-size: 130%;top: -9%;" class="fa-sliders-v-square fas c_white fa-stack-1x"></i>
</span>

Expert Panel Discussions

synonyms panel, expert panel, panel discussion, users-class,
Code Example
<i class="far fa-users-class"><⁄i>

Certified Patient Cases

Stacked Icon: fa-badge fa-notes-medical
synonyms patient case, badge, notes-medical,
Code Example
<span class="fa-stack">
	<i class="fa-badge fas fa-stack-2x"></i>
	<i style="font-size: 110%;top: -3%;" class="fa-notes-medical fas c_white fa-stack-1x"></i>
</span>

Code Example Missing Icon Information

Exception Rules