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<i class="far fa-award"><⁄i>
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.
<i class="far fa-file-signature"><⁄i>
Usage Used in buttons - the plus icon is combined with "Add [new item being added]". For example: "Add User"
<i class="far fa-plus"><⁄i>
Usage Time sensitive messages that are not evergreen news.
<i class="far fa-megaphone"><⁄i>
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
<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>
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.
<i class="far fa-headphones"><⁄i>
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
<i class="far fa-trophy"><⁄i>
Usage Appears when an item is saved to library
<i class="far fa-bookmark"><⁄i>
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.
<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>
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
<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>
Usage Signifies the user's products or potential purchases when signed into acc.org
<i class="far fa-shopping-cart"><⁄i>
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.
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
<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>
<i class="far fa-minus"><⁄i>
Usage When denoting the types of education credits or certificates that are attached to a content item.
<i class="far fa-file-certificate"><⁄i>
Usage Decision Aid: Multi-page booklet or video to support shared decision-making.
<i class="far fa-sitemap"><⁄i>
Usage Multi-page booklet for clinician to use with patient to learn about a topic.
<i class="far fa-user-md-chat"><⁄i>
<i class="far fa-thumbs-down"><⁄i>
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
<i class="far fa-arrow-to-bottom"><⁄i>
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’.
<i class="far fa-users-medical"><⁄i>
Usage Signifies that content (typically an article, jscan, etc.) is picked by the editor of ACC.org
<i class="far fa-thumbs-up"><⁄i>
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
<i class="far fa-university"><⁄i>
Usage Signifies the date of an event
<i class="far fa-calendar-alt"><⁄i>
Usage In combination with the "Collapse" these icons toggle to reflect the opposite state of complex content - such as navigation, and sections of content.
<i class="far fa-plus"><⁄i>
Usage Either a written or video format in which one or more experts teaches a topic
<i class="far fa-user-chart"><⁄i>
Usage Any link that will drive the user to a page outside of the domain of the acc should have this icon postpended to it
<i class="far fa-external-link"><⁄i>
Usage Icon representation of the social network
<i class="fab fa-facebook-square"><⁄i>
Usage One page, mostly text, explains key information about a topic.
<i class="far fa-ballot-check"><⁄i>
Usage This icon are usually combined with the word filter
<i class="far fa-filter"><⁄i>
Usage This is a set of 3 icons in one - the user can click on each A, and the font-size will change accordingly
<i class="far fa-text-size"><⁄i>
Usage Any news or editorial article that doesn't fit into the specialized sub article types
<i class="far fa-file-medical-alt"><⁄i>
Usage Icon representation of the social network
<i class="fab fa-google-play"><⁄i>
Usage Capital "G" guidelines
<i class="far fa-book-medical"><⁄i>
Usage Guideline hub icon, appears on the guideline search listing page - links to hub for the particular guideline it appears next to
<i class="fab fa-hubspot"><⁄i>
Usage Links to homepage on ACC.org - appears in top line navigation
<i class="fas fa-home"><⁄i>
<i class="far fa-image"><⁄i>
Usage One page, mostly images, that explains a health topic. Can be printed as a handout or posted on the wall.
<i class="far fa-file-chart-pie"><⁄i>
Usage Icon representation of the social network
<i class="fab fa-instagram-square"><⁄i>
Usage Icon representation of the social network
<i class="fab fa-itunes"><⁄i>
Usage JACC Icon is used in the guidelines search listing, signifiying a link to the JACC guideline article
<i class="far fa-book-open"><⁄i>
Usage In combination with the "More" icon this icon toggles simple text content by showing less of the content
<i class="far fa-chevron-up"><⁄i>
<i class="fab fa-linkedin"><⁄i>
Usage We use browser rendered bullets and do not inlcude an alternate version for consistency.
<i class="far fa-video"><⁄i>
Usage Signifies content that requires a login to view. Appears after text.
<i class="far fa-lock"><⁄i>
Usage used in main nav that denotes how a user will log into the ACC systems.
<i class="far fa-sign-in"><⁄i>
Usage used in main nav that denotes how a user will log out of the ACC systems.
<i class="far fa-sign-out"><⁄i>
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.
<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>
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
<i class="far fa-calendar-day
"><⁄i>
<i class="far fa-envelope"><⁄i>
Usage Short quick learning that can be done in less then 5 min.
<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>
<i class="far fa-user-circle"><⁄i>
Usage A news article that is an update or newsworthy
<i class="far fa-newspaper"><⁄i>
<i class="far fa-bell"><⁄i>
Usage Icon that denotes if a presentation is currently or will be "on demand"
<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>
Usage Educational materials that can be done 100% online and on demand. This type of education may or may not reward credits.
<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>
Usage A format used to test knowledge for both formative or summative assessments. Quizzes are usually brief, ie one or two questions
<i class="far fa-notes-medical"><⁄i>
Usage Used for CardioSmart and other resources that focus on the patient
<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>
Usage An article or essay that is focus on or in the words of a patient
<i class="far fa-address-card"><⁄i>
Usage Used to signifiy a link to a PDF, can appear on it's own or after linked text (ala the external link icon)
<i class="far fa-file-pdf"><⁄i>
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
<i class="far fa-podcast"><⁄i>
<i class="far fa-print"><⁄i>
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
Usage Signifies that an item was purchased, or an event was registered for
<i class="far fa-check-circle"><⁄i>
<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>
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"
<i class="far fa-times"><⁄i>
<i class="far fa-exclamation-triangle"><⁄i>
Usage SPA (Single Page Application) that helps a user understand their risk for a condition.
<i class="far fa-calculator"><⁄i>
<i class="far fa-rss-square"><⁄i>
Usage Appears next to search bars. Signifies search functinality
<i class="far fa-search"><⁄i>
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
<i class="far fa-scroll"><⁄i>
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.
<i class="far fa-book-reader"><⁄i>
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.
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.
Usage Simple icon used in lists, search, ui or small graphic moments when the full graphic would deteriorate or become unreadable.
<i class="fab fa-slideshare"><⁄i>
Usage Used in publications for round tables
<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>
<i class="far fa-sort"><⁄i>
<i class="far fa-volume"><⁄i>
Usage Signifies the ability to mute the audio file
<i class="far fa-volume-mute"><⁄i>
<i class="far fa-clock"><⁄i>
Usage Appears next to content that has a tooltip
<i class="far fa-question"><⁄i>
Usage Signifies trending sort view on Latest in Cardiology
<i class="far fa-analytics"><⁄i>
Usage Icon representation of the social network
<i class="fab fa-twitter-square"><⁄i>
Usage This icon must always be connected to the expected asset to uploaded. For example: (Upload) image
<i class="far fa-arrow-to-top"><⁄i>
<i class="far fa-user"><⁄i>
<i class="far fa-users"><⁄i>
Usage Signifies a video that's not a webinar
<i class="far fa-photo-video"><⁄i>
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
<i class="far fa-eye"><⁄i>
<i class="far fa-eye"><⁄i>
Usage Webinar events that are upcoming or are on-demand
<i class="far fa-desktop-alt"><⁄i>
<i class="far fa-tasks"><⁄i>
<i class="fab fa-youtube-square"><⁄i>
<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>
<i class="far fa-balance-scale"><⁄i>
<i class="far fa-badge-check"><⁄i>
<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>
<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>
<i class="far fa-users-class"><⁄i>
<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>