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