Esri Icon Font (Calcite theme)

The Esri Icon Font is a monochromatic icon set used at Esri for a consistent Esri branded theme.

Icon fonts have several advantages such as the ability to quickly change their color, and the fact that icon fonts size themselves to be proportional to text placed with them.

These icons are available as a True Type Font, Web Open Font Format, and SVG. For more information on web development and fonts see the Fundamental text and font styling and Web Fonts Mozilla Developer Network articles.

Using the Esri Icon Fonts as a graphic's symbol

When the ArcGIS API for JavaScript stylesheet https://js.arcgis.com/4.4/esri/css/main.css is included in a web page, the Esri Icon Fonts are immediately available for use. One potential use of the Esri Icon Fonts is to use them as symbol property of Graphic. In the code snippet below a TextSymbol is created by specifying the color, text, and font. The font property is created by autocasting the Font Class.

For more information see the Using Esri Icon Fonts with map graphics sample. See the CSS class names and Unicode values section of this topic for a complete list of unicode values.

var textSymbol = new TextSymbol({
    color: '#7A003C',
    text: '\ue61d', // esri-icon-map-pin
    font: { // autocast as esri/symbols/Font
        size: 20,
        family: 'CalciteWebCoreIcons'
    }
});

Using the Esri Icon Font on pages that do not load the ArcGIS API for JavaScript

Note: If you create any web pages that are attempting to use the Esri Icon Font, but do not load the ArcGIS API for JavaScript stylesheet then you will need to include the Required CSS for using the Esri Icon Font code section into your web page.

To add an icon to a page, just add a class to an element, like this:

<span class="esri-icon-close" aria-label="close icon"></span>

This will automatically add the icon to the page. In the icon font, the icon will be added as a ::before pseudo element in the same color and size as the text you're currently using.

CSS class names and Unicode values

The following list of Esri Icon Fonts display a preview of the font, the CSS class name required to use the icon font, and the CSS unicode value necessary to specify the content CSS property used with the ::before and ::after pseudo-elements to generate content in an element or the value of the TextSymbol.text property.

esri-icon-close
\ue600

esri-icon-drag-horizontal
\ue601

esri-icon-drag-vertical
\ue602

esri-icon-handle-horizontal
\ue603

esri-icon-handle-vertical
\ue604

esri-icon-check-mark
\ue605

esri-icon-left-triangle-arrow
\ue606

esri-icon-right-triangle-arrow
\ue607

esri-icon-down-arrow
\ue608

esri-icon-up-arrow
\ue609

esri-icon-overview-arrow-bottom-left
\ue60a

esri-icon-overview-arrow-bottom-right
\ue60b

esri-icon-overview-arrow-top-left
\ue60c

esri-icon-overview-arrow-top-right
\ue60d

esri-icon-maximize
\ue60e

esri-icon-minimize
\ue60f

esri-icon-checkbox-unchecked
\ue610

esri-icon-checkbox-checked
\ue611

esri-icon-radio-unchecked
\ue612

esri-icon-radio-checked
\ue613

esri-icon-up-arrow-circled
\ue614

esri-icon-down-arrow-circled
\ue615

esri-icon-left-arrow-circled
\ue616

esri-icon-right-arrow-circled
\ue617

esri-icon-zoom-out-fixed
\ue618

esri-icon-zoom-in-fixed
\ue619

esri-icon-refresh
\ue61a

esri-icon-edit
\ue61b

esri-icon-authorize
\ue61c

esri-icon-map-pin
\ue61d

esri-icon-blank-map-pin
\ue61e

esri-icon-table
\ue61f

esri-icon-plus
\ue620

esri-icon-minus
\ue621

esri-icon-beginning
\ue622

esri-icon-reverse
\ue623

esri-icon-pause
\ue624

esri-icon-play
\ue625

esri-icon-forward
\ue626

esri-icon-end
\ue627

esri-icon-erase
\ue628

esri-icon-up-down-arrows
\ue629

esri-icon-left
\ue62a

esri-icon-right
\ue62b

esri-icon-announcement
\ue62c

esri-icon-notice-round
\ue62d

esri-icon-notice-triangle
\ue62e

esri-icon-home
\ue62f

esri-icon-locate
\ue630

esri-icon-expand
\ue631

esri-icon-collapse
\ue632

esri-icon-layer-list
\ue633

esri-icon-basemap
\ue634

esri-icon-globe
\ue635

esri-icon-applications
\ue636

esri-icon-arrow-up-circled
\ue637

esri-icon-arrow-down-circled
\ue638

esri-icon-arrow-left-circled
\ue639

esri-icon-arrow-right-circled
\ue63a

esri-icon-minus-circled
\ue63b

esri-icon-plus-circled
\ue63c

esri-icon-add-attachment
\ue63d

esri-icon-attachment
\ue63e

esri-icon-calendar
\ue63f

esri-icon-close-circled
\ue640

esri-icon-browser
\ue641

esri-icon-collection
\ue642

esri-icon-comment
\ue643

esri-icon-configure-popup
\ue644

esri-icon-contact
\ue645

esri-icon-dashboard
\ue646

esri-icon-deny
\ue647

esri-icon-description
\ue648

esri-icon-directions
\ue649

esri-icon-directions2
\ue64a

esri-icon-documentation
\ue64b

esri-icon-duplicate
\ue64c

esri-icon-review
\ue64d

esri-icon-environment-settings
\ue64e

esri-icon-error
\ue64f

esri-icon-error2
\ue650

esri-icon-experimental
\ue651

esri-icon-feature-layer
\ue652

esri-icon-filter
\ue653

esri-icon-grant
\ue654

esri-icon-group
\ue655

esri-icon-key
\ue656

esri-icon-labels
\ue657

esri-icon-tag
\ue658

esri-icon-layers
\ue659

esri-icon-left-arrow
\ue65a

esri-icon-right-arrow
\ue65b

esri-icon-link-external
\ue65c

esri-icon-link
\ue65d

esri-icon-loading-indicator
\ue65e

esri-icon-maps
\ue65f

esri-icon-marketplace
\ue660

esri-icon-media
\ue661

esri-icon-media2
\ue662

esri-icon-menu
\ue663

esri-icon-mobile
\ue664

esri-icon-phone
\ue665

esri-icon-navigation
\ue666

esri-icon-pan
\ue667

esri-icon-printer
\ue668

esri-icon-pie-chart
\ue669

esri-icon-chart
\ue66a

esri-icon-line-chart
\ue66b

esri-icon-question
\ue66c

esri-icon-resend-invitation
\ue66d

esri-icon-rotate
\ue66e

esri-icon-save
\ue66f

esri-icon-settings
\ue670

esri-icon-settings2
\ue671

esri-icon-share
\ue672

esri-icon-sign-out
\ue673

esri-icon-support
\ue674

esri-icon-user
\ue675

esri-icon-time-clock
\ue676

esri-icon-trash
\ue677

esri-icon-upload
\ue678

esri-icon-download
\ue679

esri-icon-zoom-in-magnifying-glass
\ue67a

esri-icon-search
\ue67b

esri-icon-zoom-out-magnifying-glass
\ue67c

esri-icon-locked
\ue67d

esri-icon-unlocked
\ue67e

esri-icon-favorites
\ue67f

esri-icon-compass
\ue680

esri-icon-down
\ue681

esri-icon-up
\ue682

esri-icon-chat
\ue683

esri-icon-dock-bottom
\ue684

esri-icon-dock-left
\ue685

esri-icon-dock-right
\ue686

esri-icon-organization
\ue687

esri-icon-north-navigation
\ue688

esri-icon-locate-circled
\ue689

esri-icon-dial
\ue68a

esri-icon-polygon
\ue68b

esri-icon-polyline
\ue68c

esri-icon-visible
\ue68d

esri-icon-non-visible
\ue68e

esri-icon-link-vertical
\ue68f

esri-icon-unlocked-link-vertical
\ue690

esri-icon-link-horizontal
\ue691

esri-icon-unlocked-link-horizontal
\ue692

esri-icon-swap
\ue693

esri-icon-cta-link-external
\ue694

esri-icon-reply
\ue695

esri-icon-public
\ue696

esri-icon-share2
\ue697

esri-icon-launch-link-external
\ue698

esri-icon-rotate-back
\ue699

esri-icon-pan2
\ue69a

esri-icon-tracking
\ue69b

esri-icon-expand2
\ue69c

esri-icon-arrow-down
\ue69d

esri-icon-arrow-up
\ue69e

esri-icon-hollow-eye
\ue69f

esri-icon-play-circled
\ue6a0

esri-icon-volume-off
\ue6a1

esri-icon-volume-on
\ue6a2