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 can size themselves to be proportional to text placed with them.

For 2D MapViews, Esri Icon Fonts are available on hosted fonts files in .pbf format. These fonts are available via https://static.arcgis.com/fonts. The URL can be configured to point to your own font resources by setting the esriConfig.fontsUrl property.

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

One potential use of the Esri Icon Fonts is to use them as the 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 2D MapViews and 3D SceneViews, the Font.family for Esri Icon Font is CalciteWebCoreIcons.

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.

const 2DtextSymbol = new TextSymbol({
  color: '#7A003C',
  text: '\ue61d',  // esri-icon-map-pin
  font: {  // autocast as new Font()
    size: 24,
    family: 'CalciteWebCoreIcons'
  }
});

const 3DtextSymbol = new TextSymbol({
  color: '#7A003C',
  text: '\ue61d',  // esri-icon-map-pin
  font: {  // autocast as new Font()
    size: 24,
    family: 'CalciteWebCoreIcons'
  }
});

Using the Esri Icon Fonts as a label

Another potential use of the Esri Icon Fonts is to use them as the font.family property of the Label class. In the code snippet below, a LabelClass is created by autocasting the symbol type as text, the color, and font. Lastly, we defined the labelPlacement and the labelExpressionInfo since we will be working with a FeatureLayer. We could have also used a labelExpression if we were working with a MapImageLayer.

const labelClass = {  // autocasts as new LabelClass()
  symbol: {
    type: 'text',  // autocasts as new TextSymbol()
    color: 'green',
    font: {  // autocast as new Font()
      family: 'CalciteWebCoreIcons',
      size: 12
    }
  },
  labelPlacement: 'above-left',
  labelExpressionInfo: {
    expression: '"\ue61d"'  // esri-icon-map-pin
  }
};

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.