Download the web font files (Sorry, this will only work for Intuit employees.)

  1. Download the files from Github
  2. Unzip it and you’ll want to use the .OTF opentype file, or the .TTF truetype files (it doesn’t matter as long as you keep updating the same file type).

Each icon clearly communicates the task it solves for.
When applied consistently, icons enable our customers to quickly complete a task (examples: delete an item, attach a file). Icons should never be used as decoration, and should always correspond to an action.

 

accountant
add
add-fill
add-user
adjust
anniversary
announce
appointment
apps
arrange
arrow-back
arrow-down
arrow-right
arrow-up
art
attach
audio
auto
auto-fill
autoadd
avatar-o
award
bag
bank
batch
bills
birthday
blueprint
bookmark
business
cal-alert
calc
calendar
call
call-fill
camera
camera-fill
cancel
capital
capital-uk
card
cart-add
cash
chart
chat
chat-o
check-o
checklist
checkmark
checks
chevron-down
chevron-left
chevron-right
chevron-up
circle-alert
circle-check
circle-info
clean
clear
clear-field
clear-fill
clock
close
cloud
cloud-download
cloud-offline
cloud-online
cloud-upload
coffee
coffee-2go
community
contact
contractors
copy
create
create-1
create-lg
credit-card
crop
cui
customers
customize
dashboard
dashboard-fill
delete
desktop
direct-deposit
doc-empty
document
document-alt
down
download
draft
drag
drop-left
drop-right
dropdown
duplicate
edit
email
employees
eqpt-tech
exclude
expenses
expert
eye
filter
financial
flag
flash
flyup
folder
folder-solid
fullscreen
gift
glasses
global-create
global-create-alt
graph
grid
groom
group
hamburger
headset
help
help-o
hexagon
history
home-fill
home-outline
hourglass
idea
image
import
inbox
info
insurance
inventory
inventory-checklist
inventory-list
invoices
invoices-fill
keyboard
label-new
labs
laptop
left
lightbulb-o
link
list
loading
location
location-fill
lock
magic
mailbox
map
map-pin
marketing
marketing-alt
maximize
meals-entertainment
menu
menu-collapse
menu-expand
message
microphone
mileage
mileage-fill
minimize
money-in
money-out
motorcycle
multi-users
new
new-window
newsletter
no-access
note
notification
offline
other
overflow
payments
personal
phone
pin
play
pop-in
pop-out
preview
print
pro-advisor
products
progress
quotes
radio-toggle-o
radio-toggle-on
receipt-o
receipts
reconcile
redo
refresh
reminder
reports
reserved
right
rotate
save
save-1
schedule
search
select
send
services
settings
settings-o
share
sm-chevron-down
sm-chevron-left
sm-chevron-right
sm-chevron-up
sort-ascending
sort-decending
speech-bubble
split
star
star-half
star-half-full
star-o
survey
swap
tag
tax-fill
taxes
tear-alert-lt
tear-alert-rt
tear-check-lt
tear-check-rt
tear-pending
template
test-drive
text
thumb-down
thumb-up
tour
track-time
transactions
transactions-fill
trophy
truck
undo
unlink
unlock
up
upgrade
upload
user
vehicle
vendors
vidplay
vidresize-1
vidresize-2
web
wellness

Where to find the icon font

  1. Download the files from Github
  2. Unzip it and you’ll want to use the .OTF opentype file, or the .TTF truetype files (it doesn’t matter as long as you keep updating the same file type).

Icon Font Github Repository

Design usage

To use the icon font on your preferred design software, follow the steps below:

  1. Create a text element in Sketch or design tool
  2. Set the font to HarmonyIcons.
  3. Using the icon chart above, locate the icon you’d like to use and select + copy it into your clipboard.
  4. Paste the glyph into your text element

To use icon glyphs on Lingo:

  1. Open Quickbooks Lingo
  2. Click Icon Fonts on left nav menu
  3. Click specific glyph
  4. Select .svg from Download menu

Code usage

Let’s say you would like to use the info icon.
info
If you want to use this icon in HTML, call the <i> element like this:
<i class="hi hi-info"></i>

Request a new icon

Set up office hours with the brand team: Click here

How to update icon font file

Ideally, we will not be modifying the current icon font. In the case of a site redesign where icon glyphs will need to be updated, here are instructions on how to generate a new icon font file.

Tutorial and guidelines on how to create a new icon font

  • Was this Helpful?
  •