Icons

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

.edit

\E923

.enlarge

\EB3B

.envelope

\EA34

.envelope2

\EA33

.error-triangle

\ED51

.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

.fork-spoon

\EBB9

.fuel

\EC0A

.gavel

\EBE1

.gear

\EB5E

.graph-pie

\EB82

.grid

\EC5F

.grid-small

\EC5A

.heart

\ECEC

.heart-o

\ECEB

.home

\E90C

.image

\E93C

.images

\E93E

.inbox

\EA80

.info

\ED61

.info-o

\ED64

.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

.printer

\EA66

.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

.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.