Iconography
Icons are used to express actions, an item’s state, and even to categorize data. All icons created and added to the system must be clear, intuitive, and consistent. They should be used sparingly and in a way that is consistent with their original intent.

System Set

Style
When creating an icon it is important to understand the grid and styling decisions made to unify that icon within a family of icons.



Filled vs. Outlined
Our icons predominantly consist of filled icons because they offer ideal contrast to the heavy content throughout our product.

Correct

Incorrect
Radius
Our icons should be crisp and punchy. When creating new icons, do not use a radius on corners when possible.
Naming
When possible, icons are named after the physical object they represent. For example, we would call an icon trash instead of delete.
Sizing
The default recommended sizing for icons is 24px x 24px. Icons can also be used at 16px x16px for small sizing and 32px x32px for large.

Adding New Icons to the System Set
Steps to follow:
1. UX Designer checks the current system set to see if an existing icon can be used
2. If no icon exists in the system that is appropriate, the UX Designer can explore a new icon to be used during the conceptual phase
3. UX Designer works with the Design Systems Team during this process to ensure the new icon meets the established design guidelines
4. Once the new icon design is approved and ready for development, the icon can be requested by the engineering team to be added to CORE for the next release
5. NOTE: If a specialty icon is needed that will not be used system wide, an .svg version can still be used in development, if needed
2. If no icon exists in the system that is appropriate, the UX Designer can explore a new icon to be used during the conceptual phase
3. UX Designer works with the Design Systems Team during this process to ensure the new icon meets the established design guidelines
4. Once the new icon design is approved and ready for development, the icon can be requested by the engineering team to be added to CORE for the next release
5. NOTE: If a specialty icon is needed that will not be used system wide, an .svg version can still be used in development, if needed
Icon Search
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Activity
tool activity, pulse, wave
ArrowAltRight
arrow, right, sent, ERP
ArrowAltRightUpLeft
arrow, left, up, rejected, sent back, ERP
ArrowDown
arrow, down
ArrowLeft
arrow, left, back
ArrowUp
ArrowsCycleClockwise
arrows, refresh, cycle, flip, sync
ArrowsSync
icon, arrows, synced, status
Ban
blocked, rejected, status, not allowed
Bell
bell, notifications, alarm
Binoculars
binoculars, observation, observe, watch
Blueprint
blueprint, drawing, floor plan
Book
book, specifications
Building
building, company, contact, business
Calculator
calculator, calculate, financial
Calendar
calendar, date
Camera
camera, photo, image, picture
CaretDown
caret, down, dropdown
CaretLeft
caret, right, menu tier
CaretRight
caret, right, menu tier
CaretsIn
carets, in, contract, collapse row
CaretsOut
carets, out, expand row
ChartBar
chart, bar, report, graph
Check
check, checkmark, approved, success
ChevronDown
chevron, down
ChevronLeft
chevron, left, previous
ChevronRight
chevron, right, next
Clear
clear, close, x, exit, delete
Clock
clock, icon, time
Cog
cog, gear, settings
Comment
comment, speech bubble, message, feedback
Comments
comments, messages, speech bubbles
Computer
computer, desktop, monitor, screen
CurrencyUSA
currency, usa, dollars, financial, money, dollar sign
Download
download, cloud, arrow
Duplicate
duplicate, copy, clone, lessons
Earth
earth, world, globe
Education
education, graduation
EllipsisHorizontal
ellipsis, overflow, horizontal, more, dots
EllipsisVertical
overflow, ellipsis, vertical, more, dots
Envelope
email, envelope, mail
Error
error, alert, status, exclamation, octagon
Export
export, arrow, right
ExternalLink
external link, launch, open, arrow
EyeOff
eye, off, invisible, hide
EyeOn
eye, on, visible, show, view
File
file, page, document
FileList
file, document, detail, list
Filter
filter
Folder
folder
Fullscreen
fullscreen, expand, maximize, arrows
Fullscreen
fullscreen, expand, maximize, arrows
Gauge
gauge, speedometer, dashboard
GlobalNetwork
global, network, globe
Grip
grip, grab, drag
Help
help, questionmark
Home
home
Image
image, photo, picture
Import
import, arrow, left
Info
info, i, information
Key
key, permissions
Lightning
lightning, bolt, auto calculate, flash
Link
link, linked
Location
location, poi
Lock
lock, permissions
Megaphone
megaphone, announcement
Paperclip
paperclip, attach, attachment
Payments
payments, financials
Pencil
pencil, edit
PencilRuler
pencil, ruler, planning, design
PencilSignature
pencil, sign, signature
People
people, persons, users, group
Person
person, user, people
Phone
phone , mobile, contact
PlaceholderIcon
placeholder, procore, c
Plug
plug, plug-in, marketplace
Plus
plus, add, create, new
Presentation
presentation, education, tutorial
Pushpin
pin, pushpin, thumb tack
QrCode
qr, code
Reply
reply, arrow, up, left
RotateClockwise
rotate, clockwise, arrow, right
RotateCounterClockwise
rotate, counter clockwise, arrow, left
Search
search, magnifying glass
Sliders
sliders, config, configure, settings
Snapshot
snapshot, plus
Star
star, favorite
ThumbDown
icon, thumb, down, dislike
ThumbUp
thumb, up, like
Toolbox
toolbox, tools
Trash
trash, can, delete, remove
Unlock
unlock, permissions
Upload
upload, arrow, up, cloud
Video
video, play
ViewCards
view, cards
ViewColumns
view, columns
ViewGrid
view, grid, thumbnails
ViewGrouping
view, groups, grouping
ViewRows
view, rows
Wifi
wifi, on, internet, network connection
WifiOff
wifi, on, internet, network connection
Wrench
wrench, maintenance