Brightree Style Guides

Iconography

Universal icons are rare. A user’s understanding of an icon is based on previous experience. Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity. To help overcome the ambiguity that almost all icons face, a text label must be present alongside an icon to clarify its meaning.

Icons must first and foremost communicate meaning in a graphical user interface. Icons are, by definition, a visual representation of an object, action, or idea. If that object, action, or idea is not immediately clear to users, the icon is reduced to mere eye candy — confusing, frustrating, eye candy — and to visual noise that hinders people from completing a task.

Benefits of using icons in a GUI include...

Icons make good targets: they are typically sized large enough to be easily touched in a finger-operated UI, but also work well with a mouse cursor (in contrast to words, which can suffer from read–tap asymmetry on touch screens).
Icons can be compact enough to allow toolbars, palettes, and so on to display many icons in a relatively small space.
Icons may be easily at a glance if well designed — particularly true for standard icons that people have seen and used before.

Products make use of the free version of Font Awesome.

Be sure to include the following URL in the <head> of each page or template where Font Awesome is needed:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">

Icons may be inserted directly into the UI via a class added to the <i> tag, as is shown in the following code example: In the following example showing an icon representing "remove" or "disable", the code (without a hover tooltip) would be <i class="fas fa-ban">Remove</i>.


<div class="justify-content-end blue-nav-icons">
<i class="fas fa-ban pr-3" data-toggle="tooltip" data-placement="bottom" title="Remove"></i>
<i class="far fa-heart pr-3" data-toggle="tooltip" data-placement="bottom" title="Favorites"></i>
<i class="fas fa-print pr-3" data-toggle="tooltip" data-placement="bottom" title="Print"></i>
<i class="fas fa-redo pr-3" data-toggle="tooltip" data-placement="bottom" title="Refresh All"></i>
</div>

All icons available in the Font Awesone collection can be found here: Font Awesome Cheat Sheet. This tool enables simple methods for copying/pasting the necessary icon code.

If icons need to be implemented as SVGs or PNGs, the Font Awesome website provides additional means for accessing icons in these formats.

Brightree Iconography - Existing and MX One Equivalents

AFO Icon	Usage/Metaphor	MX One Replacement
	Alerts
	New secure Message/Email
	Brightree Communicate Message
	Message
	Referral
	Help
	Help
	Patient Schedule
	Patient Schedule- Day
	Delete
	Delete
	Clear
	Delivery
	Bereavement - Generate Mailing
	Edit
	Collapse Panel
	Expand Panel
	Filter
	Filter
	Search
	Search
	Information
	Delete this - standardize on below treatment
	Actions	No icon needed
	Favorites - selected
	Favorites - unselected
	Loading
	Inline Loading
	Task hotlist loading
	Loading
	Loading	Please wait...
	Pickup Exchange
	Placeholder Photo
	Upload Photo
	Status Start
	Reset
	Refresh
	Refresh
	Refresh
	Save
	Download
	Remove All Tasks
	View Hours Breakdown
	Cancel Changes
	Not Allowed
	Share (iPad)
	PoC Completed Task
	PoC Outstanding Task
	Impact Star Rating
	Negative Impact
	Positive Impact
	OASIS Mismatch
	Process Measure
	Publicly Reported Income
	Show Decline
	Show Improvement
	Regulatory Alert
	VBP
	Analytics
	Speech to Text
	Speech to Text
	Communicate
	Scheduling - ready for review
	Scheduling - ready for final review
	Scheduling - accepted
	Scheduling - closed
	Scheduling - edit
	Scheduling - error
	Scheduling - rejected
	Scheduling - scheduled
	Scheduling - accepted
	Scheduling - in review
	Locked
	Unlocked