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. Use a 24px grid when designing for standard icons. A 16px grid can be used to design icons that are primarily or commonly displayed at smaller sizes.




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, use a radius on corners only when needed.
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 x 16px for small sizing and 32px x 32px for large.

Sizing
Colored icons can be used for emphasis and to indicate status. Use color sparingly bring attention to items.

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
AppAssemble
assemble, app, integration
Archive
archive, box
ArrowAltRight
arrow, right, sent, ERP
ArrowAltRightUpLeft
arrow, left, up, rejected, sent back, ERP
ArrowDashDown
arrow, dash, down, activity feed
ArrowDashLeft
arrow, dash, left, activity feed
ArrowDashRight
arrow, right, released, activity feed
ArrowDashUp
arrow, dash, up, elevated, activity feed
ArrowDown
arrow, down
ArrowLeft
arrow, left, back
ArrowRight
arrow, right, forward
ArrowSlantDownLeft
arrow, slant, down, left, diagonal, markup, viewer
ArrowSlantUnited
arrow, double, slant, united, markup, viewer
ArrowUp
arrow, up
ArrowUpShare
share, arrow, up, ios
ArrowheadMarquee
arrow, arrowhead, marquee, markup, drawings, viewer
ArrowsConverge
arrows, coordination issues, tool, markup, viewer, converge
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
BookCurrencyUSAList
book, currency, dollar, usa, money, financial
BookInfo
i, instructions, tool, book, info
BookPerson
directory, tool, book, person, user
BookRibbon
book, ribbon, bookmark, saved view
Building
building, company, contact, business
Calculator
calculator, calculate, financial
Calendar
calendar, date
Camera
camera, photo, image, picture
CaretDown
caret, down, dropdown
CaretLeft
caret, left, menu tier
CaretRight
caret, right, menu tier
CaretsIn
carets, in, contract, collapse row
CaretsInHorizontalWithLine
carets, line, collapse, vertical
CaretsInVertical
carets, in, collapse, vertical
CaretsInVerticalWithLine
carets, in, line, contract, horizontal
CaretsOut
carets, out, expand row
CaretsOutHorizontalWithLine
carets, line, expand, vertical
CaretsOutVertical
carets, out, expand, vertical
CaretsOutVerticalWithLine
carets, line, out, expand
ChartBar
chart, bar, report, graph
ChartLine
chart, line, report, graph
Check
check, checkmark, approved, success, activity, banner
CheckNodes
itp, tool, check, nodes
ChevronDown
chevron, down, expanded
ChevronLeft
chevron, left, previous, back
ChevronRight
chevron, right, next, collapsed
Circle
circle, ellipse, record
CircleNodes
meetings, tool, circle, nodes
CircleStroked
circle, stroked, outlined, markup, viewer
CirclesOpacity
circles, opacity, transparency, markup, viewer
Clear
clear, close, x, exit, delete
ClipboardBulletedChecks
icon, clipboard, bullets, check, tasks
ClipboardCheck
inspections, clipboard, check, tool
ClipboardPushpin
icon, clipboard, pushpin, punchlist, tool
Clock
clock, icon, time
ClockBricks
time, materials, T&M, tool
CloudMarkup
cloud, markup, viewer, drawing
Cog
cog, gear, settings
Comment
comment, speech bubble, message, feedback
CommentPeople
icon, comments, people, correspondence, messages
Comments
comments, messages, speech bubbles
Compass
compass, architecture, drawing, tool, viewer
Computer
computer, desktop, monitor, screen
ConcentricCircles
open, status, activity feed, circles
Cone
cone, safety, tool
Crosshair
compare, crosshair, registration
Cube
cube, model, 3D, tool
CurrencyListUSA
currency, dollar, financial, bidding, tool, money
CurrencyUSA
currency, dollar, financial, money, dollar sign, usa, america
Download
download, cloud, arrow
Duplicate
duplicate, copy, clone, lessons
Earth
earth, world, globe
Education
education, graduation cap, lesson, learning
EllipsisHorizontal
ellipsis, overflow, horizontal, more, dots
EllipsisVertical
overflow, ellipsis, vertical, more, dots
Envelope
email, envelope, mail
EnvelopeOpen
envelope, email, mail, open
Error
error, alert, status, exclamation, octagon
Excavator
equipment, machine, earth mover, construction, tool
Export
export, arrow, right
ExternalLink
external link, launch, open, arrow
Eye
eye, on, visible, show, view
EyeOff
eye, off, invisible, hide
File
file, page, document
FileArrowDownRight
file, arrow, down, right, change orders, tool
FileChartBar
financial, report, tool, graph, chart, bar
FileChartLine
financials, budget, report graph, line, chart
FileClock
time sheet, file, clock, tool
FileCurrencyUSA
financial, direct cost, tool
FileCurrencyUSABullets
Invoicing, invoice, tool, file, page, currency, money, financial, usa, dollar, money, bullets
FileCurrencyUSAPencil
file, page, estimate, estimating, estimates, tool, Currency, USA, dollar, pencil, edit
FileEye
file, eye, view, viewer, launch
FileList
file, document, detail, list
FileListBulleted
file, document, detail, list, bulleted
FileLock
file, document, lock, locked, restricted
FilePlus
file, document, add, create
FileQuestionMark
file, question mark, rfi, tool
FileSearch
file, search, magnifying glass, activity feed, review
FileSigned
prime contract, signature, tool, file, signed
Filter
filter, funnel, refine
Fire
fire, flame, hot
Flowchart
icon, flowchart, diagram
Folder
folder, documents
FolderQuestionMark
rfq, tool, folder, question mark
Fullscreen
fullscreen, expand, maximize, arrows
FullscreenExit
exit, fullscreen, contract, minimize, arrows
Gauge
gauge, speedometer, dashboard
GlobalNetwork
global, network, globe
GridStroked
grid, viewer, measure, drawing, markup
Grip
grip, grab, drag
Handshake
tool, commitments, deal, hands
Help
help, questionmark
Highlighter
highlighter, markup, viewer
Home
home, house
Image
image, photo, picture
ImageStack
images, photos, pictures, stack, markup, viewer
Import
import, arrow, left
Info
info, i, information
Key
key, permissions
Keyboard
keyboard, key commands, shortcuts
Knife
custom, tool, swiss army, knife
Lasso
lasso, rope, select, markup, viewer
Lightning
lightning, bolt, auto calculate, flash
Line1px
line, tool, 1px, thin, markup, viewer
Line2px
line, tool, 2px, thin, medium, markup, viewer
Line3px
line, tool, 3px, medium, thick, markup, viewer
Line4px
line, tool, 4px, medium, thick, markup, viewer
Line5px
line, tool, 5px, thick, markup, viewer
LineFreehand
line, tool, freehand, squiggle, markup, viewer
Link
link, linked, chain
LinkCircled
markup, viewer, link, circle
LinkOff
link, unlink, remove, off, chain
LinkSquared
markup, viewer, link, square
List
list, hamburger, menu
ListArrowDownRight
list, arrow, down, right, folder view, switch view
ListBulleted
list, bulleted
ListGrouped
list, grouped, bulleted
ListSearch
list, review, search, magnifying glass
Location
location, poi
Lock
lock, permissions
Megaphone
megaphone, announcement
Minus
subtract, increment, undefined, remove, negative
NodesPolyline
nodes, polyline, drawing, markup, viewer, vector
NodesShare
share, android, nodes
NotepadList
daily log, tool, notepad, list
NotepadPencil
pencil, notepad, log, tool
NotepadPeople
notepad, log, tool, manpower, workforce, daily log
Number
number, pound, hashtag, hash
PaperAirplane
send, transmittals, paper airplane, tool
Paperclip
paperclip, attach, attachment
Payments
payments, financials, money
Pencil
pencil, edit
PencilErase
change order, erase, tool
PencilMarkup
pencil, markup, viewer, sketch, squiggle, tool
PencilRuler
pencil, ruler, planning, design
PencilSignature
pencil, sign, signature
People
people, persons, users, group
PeopleGroup
people, users, group, crew, tool
Person
person, user, people
PersonMinus
user, remove, minus, person
PersonPlus
user, person, add, plus
Phone
phone, contact, call
PhoneMobile
phone, mobile, contact, call
PlaceholderIcon
placeholder, procore, c, logo
Plug
plug, plug-in, marketplace
Plus
plus, add, create, new
Presentation
presentation, education, tutorial
Pushpin
pin, pushpin, thumb tack
PushpinOff
pin, pushpin, off, thumb tack
QrCode
qr, code
Reply
reply, arrow, up, left
Ribbon
ribbon, bookmark, saved view
RibbonPerson
ribbon, super user, admin, tool
Rocket
rocket, launch, takeoff, tool
RotateClockwise
rotate, clockwise, arrow, right
RotateCounterClockwise
rotate, counter clockwise, arrow, left
Ruler
ruler, measure, drawing, viewer
Search
search, magnifying glass
ShieldStar
admin, official response, tool
Siren
incidents, siren, tool, alarm
Sliders
sliders, config, configure, settings
Snapshot
snapshot, plus, target, viewfinder
Square
stop, square, solid
SquareStackLink
squares, stack, link, related items
SquareStackedDashed
copy, compare, cut, squares, stack, dashed
SquareStroked
square, stroked, outline, viewer, drawing, markup
Stamp
submittals, tool, stamp
Star
star, favorite, review, rating
Stopwatch
clock, my time, tool, timer
Table
table, columns, rows
Text
text, font, letters, type, typography
TextBox
text, box, activity feed, letter, type, typography
ThumbDown
icon, thumb, down, dislike
ThumbUp
thumb, up, like
Toolbox
toolbox, tools
Trash
trash, can, delete, remove
TriangleRight
play, triangle, right
Unlock
unlock, permissions
Upload
upload, arrow, up, cloud
Video
video, play, media
ViewCards
view, cards
ViewColumns
view, columns
ViewGrid
view, grid, thumbnails
ViewGrouping
view, groups, grouping
ViewRows
view, rows
ViewThumbnails
view, grid, thumbnails
Warning
warning, alert, exclamation, triangle
Wifi
wifi, on, internet, network connection
WifiOff
wifi, off, internet, network connection
Workflow
work, flows, workflow, diagram
Wrench
wrench, maintenance
WrenchHammer
construction, custom, tool
ZoomMinus
magnifying glass, minus, zoom out
ZoomPlus
magnifying glass, plus, zoom in