Icons
Usage
Definition
Icons help communicate key touch-points in the experience. They are to be used in combination with text and without text.
Manheim Font
The Manheim font leverages ico-moon's font library and is a css-managed web font. There are over 2000 fonts in total of which many were handpicked to be used across experiences. To use the font in your designs download the fonts to your font manager to preview and use them.
.360
\E907
.360-exterior
\E904
.360-interior-front
\E90D
.360-interior-rear
\E906
.alarm-add
\EA54
.alarm-clock
\EA53
.alarm-set
\EA55
.arrow-down
\EE63
.arrow-left
\EE65
.arrow-right
\EE61
.arrow-up
\EE5F
.arrows-left-right
\EE47
.arrows-up-down
\EE84
.attach
\ECA9
.back-to-start
\EDB2
.barcode
\E9F6
.bell
\EA58
.bell-o
\E927
.blocked
\ED67
.bolt
\E901
.bubble
\EAC1
.bubbles
\EAC3
.bullet
\EC68
.calendar
\EA5F
.camcorder
\E902
.camera
\E944
.cancel-circle
\ED63
.cancel-circle-o
\ED62
.car
\EC07
.car-side
\E90B
.checkbox-checked
\EE6B
.checkbox-unchecked
\EE6C
.checkmark
\ED6E
.checkmark-circle
\EE73
.chevron-down
\EDBD
.chevron-down-chamfered
\E925
.chevron-down-light
\EDC2
.chevron-left
\EDC1
.chevron-left-light
\EDC8
.chevron-right
\EDB9
.chevron-right-light
\EDBE
.chevron-up
\EDB5
.chevron-up-light
\EDBA
.clipboard
\EC50
.clipboard-checked
\EC51
.clock
\EA4E
.cloud-upload
\EC75
.condition-report
\E909
.credit-card
\EA16
.cross
\ED6A
.cross-small
\ED6B
.cup
\EBC6
.damages
\E90A
.details
\E900
.direction
\E0FE
.disk
\EAB4
.dollar-o
\EA0B
.download
\ECD4
.edit
\E923
.enlarge
\EB3B
.envelope
\EA34
.envelope2
\EA33
.error-triangle
\ED51
.export
\E914
.eye
\ECAC
.eye-blocked
\ECAF
.file-empty
\E99E
.file-excel
\EF39
.file-pdf
\EF36
.file-spreadsheet
\E9C5
.file-text
\E9AE
.files-empty
\E99F
.filter
\EE88
.flag
\E912
.fork-spoon
\EBB9
.fuel
\EC0A
.gavel
\EBE1
.gear
\EB5E
.graph-pie
\EB82
.grid
\EC5F
.grid-small
\EC5A
.grounding
\E910
.heart
\ECEC
.heart-o
\E911
.home
\E90C
.image
\E93C
.images
\E93E
.inbox
\EA80
.info
\ED61
.info-o
\ED64
.leave
\E913
.left-right
\EE43
.link
\EC96
.list
\EC57
.location
\EA38
.location-area
\EA39
.locked
\EB50
.manheim-medallion
\E905
.medal
\EB9D
.megaphone
\E979
.menu
\EC6E
.minus
\ED59
.minus-circle
\ED5F
.minus-circle-o
\ED60
.minus3
\ED5E
.mobile
\EA75
.new-window
\EEC5
.notification-circle
\ED4F
.odometer
\EBDD
.paint-can
\E926
.paint-drop
\E934
.pause
\ED83
.pin
\F08D
.pin2
\F08E
.play
\ED82
.plus
\ED5D
.plus-circle
\ED57
.plus-circle-o
\ED56
.price-tag
\E90F
.printer
\EA66
.profile-ccw-circle-arrow
\E90E
.qr-code
\E9F8
.refresh
\EDA7
.reset-time
\EA4C
.rotate-left
\EAA6
.rotate-right
\EAA7
.search
\EB30
.shield
\EC2E
.shield-check
\EC2F
.shrink
\EB3C
.sort
\EE48
.sound-off
\EDA4
.sound-on
\ED8D
.spinner
\EB20
.star-empty
\ECE3
.star-full
\ECE5
.star-half
\ECE4
.stopwatch
\EA5E
.three-dots-horizontal
\EC67
.three-dots-vertical
\EC59
.thumbs-down
\E908
.thumbs-up
\E903
.trash
\EBFB
.triangle-down
\EDC9
.triangle-down-small
\EDC6
.triangle-left
\EDCA
.triangle-left-small
\EDC7
.triangle-right
\EDCB
.triangle-right-small
\EDC5
.triangle-up
\EDCC
.triangle-up-small
\EDC4
.truck
\EC0C
.unlink
\EC97
.unlocked
\EB51
.upload
\ECD5
.user
\EAF4
.user-add
\EAF6
.users
\EAF5
.wifi
\E97C
.zoom-in
\EB31
.zoom-out
\EB32
Usage Guidelines
To promote ease of scanning and understanding, follow these UX best practices:
Do
Use icons to communicate meaning or emphasize meaning.
Use icons to mean the same thing that they mean in other Manheim applications.
Use text with icons whenever possible.
Use stand alone icons sparingly and specify the alt-text that communicates the meaning of the icon.
Icons with inline text are typically 12px, 14px, or 16px.
Large stand alone icons should be sized in multiples of 8 (e.g. 24px, 32px, 40px, etc).
Provide proportional white space around large standalone icons, also in multiples of 8.
Don't
Use icons as visual enhancements without meaning. Instead, use textures, illustrations, etc as visual enhancements when appropriate.
Use icons to mean something different than their common meaning at Manheim.
Use different icons to mean the same thing.
Use so small an icon that it becomes illegible.
Use so large an icon that it crowds out proportional whitespace.
Code
Icon Methods
Icons are installed as a CSS font, and can be applied to self-closing span or i tags without children.
Icons can be added to the DOM with classnames
Or Icons can be rendered as a React component
Icons can also be added to the DOM via the Icon component
Or Icons can be rendered as SVGs in the DOM
Icons can also be added to the DOM as an SVG via the IconSvg component
Color, Size
Icons can be styled with text utility classes.