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' ,
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.
Sample Code : Required CSS for using the Esri Icon Font@font-face {
font-family : 'CalciteWebCoreIcons' ;
src :
url ('https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCoreIcons.ttf?cu4poq' ) format ('truetype' ),
url ('https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCoreIcons.woff?cu4poq' ) format ('woff' ),
url ('https://raw.githubusercontent.com/Esri/arcgis-js-api/master/themes/calcite/icons/fonts/CalciteWebCoreIcons.svg?cu4poq#CalciteWebCoreIcons' ) format ('svg' );
font-weight : normal;
font-style : normal;
}
[class^="esri-icon-"] , [class*=" esri-icon-"] {
font-family : 'CalciteWebCoreIcons' !important ;
speak : none;
font-style : normal;
font-weight : normal;
font-variant : normal;
text-transform : none;
line-height : 1 ;
-webkit-font-smoothing : antialiased;
-moz-osx-font-smoothing : grayscale;
}
.esri-icon-close :before {
content : "\e600" ;
}
.esri-icon-drag-horizontal :before {
content : "\e601" ;
}
.esri-icon-drag-vertical :before {
content : "\e602" ;
}
.esri-icon-handle-horizontal :before {
content : "\e603" ;
}
.esri-icon-handle-vertical :before {
content : "\e604" ;
}
.esri-icon-check-mark :before {
content : "\e605" ;
}
.esri-icon-left-triangle-arrow :before {
content : "\e606" ;
}
.esri-icon-right-triangle-arrow :before {
content : "\e607" ;
}
.esri-icon-down-arrow :before {
content : "\e608" ;
}
.esri-icon-up-arrow :before {
content : "\e609" ;
}
.esri-icon-overview-arrow-bottom-left :before {
content : "\e60a" ;
}
.esri-icon-overview-arrow-bottom-right :before {
content : "\e60b" ;
}
.esri-icon-overview-arrow-top-left :before {
content : "\e60c" ;
}
.esri-icon-overview-arrow-top-right :before {
content : "\e60d" ;
}
.esri-icon-maximize :before {
content : "\e60e" ;
}
.esri-icon-minimize :before {
content : "\e60f" ;
}
.esri-icon-checkbox-unchecked :before {
content : "\e610" ;
}
.esri-icon-checkbox-checked :before {
content : "\e611" ;
}
.esri-icon-radio-unchecked :before {
content : "\e612" ;
}
.esri-icon-radio-checked :before {
content : "\e613" ;
}
.esri-icon-up-arrow-circled :before {
content : "\e614" ;
}
.esri-icon-down-arrow-circled :before {
content : "\e615" ;
}
.esri-icon-left-arrow-circled :before {
content : "\e616" ;
}
.esri-icon-right-arrow-circled :before {
content : "\e617" ;
}
.esri-icon-zoom-out-fixed :before {
content : "\e618" ;
}
.esri-icon-zoom-in-fixed :before {
content : "\e619" ;
}
.esri-icon-refresh :before {
content : "\e61a" ;
}
.esri-icon-edit :before {
content : "\e61b" ;
}
.esri-icon-authorize :before {
content : "\e61c" ;
}
.esri-icon-map-pin :before {
content : "\e61d" ;
}
.esri-icon-blank-map-pin :before {
content : "\e61e" ;
}
.esri-icon-table :before {
content : "\e61f" ;
}
.esri-icon-plus :before {
content : "\e620" ;
}
.esri-icon-minus :before {
content : "\e621" ;
}
.esri-icon-beginning :before {
content : "\e622" ;
}
.esri-icon-reverse :before {
content : "\e623" ;
}
.esri-icon-pause :before {
content : "\e624" ;
}
.esri-icon-play :before {
content : "\e625" ;
}
.esri-icon-forward :before {
content : "\e626" ;
}
.esri-icon-end :before {
content : "\e627" ;
}
.esri-icon-erase :before {
content : "\e628" ;
}
.esri-icon-up-down-arrows :before {
content : "\e629" ;
}
.esri-icon-left :before {
content : "\e62a" ;
}
.esri-icon-right :before {
content : "\e62b" ;
}
.esri-icon-announcement :before {
content : "\e62c" ;
}
.esri-icon-notice-round :before {
content : "\e62d" ;
}
.esri-icon-notice-triangle :before {
content : "\e62e" ;
}
.esri-icon-home :before {
content : "\e62f" ;
}
.esri-icon-locate :before {
content : "\e630" ;
}
.esri-icon-expand :before {
content : "\e631" ;
}
.esri-icon-collapse :before {
content : "\e632" ;
}
.esri-icon-layer-list :before {
content : "\e633" ;
}
.esri-icon-basemap :before {
content : "\e634" ;
}
.esri-icon-globe :before {
content : "\e635" ;
}
.esri-icon-applications :before {
content : "\e636" ;
}
.esri-icon-arrow-up-circled :before {
content : "\e637" ;
}
.esri-icon-arrow-down-circled :before {
content : "\e638" ;
}
.esri-icon-arrow-left-circled :before {
content : "\e639" ;
}
.esri-icon-arrow-right-circled :before {
content : "\e63a" ;
}
.esri-icon-minus-circled :before {
content : "\e63b" ;
}
.esri-icon-plus-circled :before {
content : "\e63c" ;
}
.esri-icon-add-attachment :before {
content : "\e63d" ;
}
.esri-icon-attachment :before {
content : "\e63e" ;
}
.esri-icon-calendar :before {
content : "\e63f" ;
}
.esri-icon-close-circled :before {
content : "\e640" ;
}
.esri-icon-browser :before {
content : "\e641" ;
}
.esri-icon-collection :before {
content : "\e642" ;
}
.esri-icon-comment :before {
content : "\e643" ;
}
.esri-icon-configure-popup :before {
content : "\e644" ;
}
.esri-icon-contact :before {
content : "\e645" ;
}
.esri-icon-dashboard :before {
content : "\e646" ;
}
.esri-icon-deny :before {
content : "\e647" ;
}
.esri-icon-description :before {
content : "\e648" ;
}
.esri-icon-directions :before {
content : "\e649" ;
}
.esri-icon-directions2 :before {
content : "\e64a" ;
}
.esri-icon-documentation :before {
content : "\e64b" ;
}
.esri-icon-duplicate :before {
content : "\e64c" ;
}
.esri-icon-review :before {
content : "\e64d" ;
}
.esri-icon-environment-settings :before {
content : "\e64e" ;
}
.esri-icon-error :before {
content : "\e64f" ;
}
.esri-icon-error2 :before {
content : "\e650" ;
}
.esri-icon-experimental :before {
content : "\e651" ;
}
.esri-icon-feature-layer :before {
content : "\e652" ;
}
.esri-icon-filter :before {
content : "\e653" ;
}
.esri-icon-grant :before {
content : "\e654" ;
}
.esri-icon-group :before {
content : "\e655" ;
}
.esri-icon-key :before {
content : "\e656" ;
}
.esri-icon-labels :before {
content : "\e657" ;
}
.esri-icon-tag :before {
content : "\e658" ;
}
.esri-icon-layers :before {
content : "\e659" ;
}
.esri-icon-left-arrow :before {
content : "\e65a" ;
}
.esri-icon-right-arrow :before {
content : "\e65b" ;
}
.esri-icon-link-external :before {
content : "\e65c" ;
}
.esri-icon-link :before {
content : "\e65d" ;
}
.esri-icon-loading-indicator :before {
content : "\e65e" ;
}
.esri-icon-maps :before {
content : "\e65f" ;
}
.esri-icon-marketplace :before {
content : "\e660" ;
}
.esri-icon-media :before {
content : "\e661" ;
}
.esri-icon-media2 :before {
content : "\e662" ;
}
.esri-icon-menu :before {
content : "\e663" ;
}
.esri-icon-mobile :before {
content : "\e664" ;
}
.esri-icon-phone :before {
content : "\e665" ;
}
.esri-icon-navigation :before {
content : "\e666" ;
}
.esri-icon-pan :before {
content : "\e667" ;
}
.esri-icon-printer :before {
content : "\e668" ;
}
.esri-icon-pie-chart :before {
content : "\e669" ;
}
.esri-icon-chart :before {
content : "\e66a" ;
}
.esri-icon-line-chart :before {
content : "\e66b" ;
}
.esri-icon-question :before {
content : "\e66c" ;
}
.esri-icon-resend-invitation :before {
content : "\e66d" ;
}
.esri-icon-rotate :before {
content : "\e66e" ;
}
.esri-icon-save :before {
content : "\e66f" ;
}
.esri-icon-settings :before {
content : "\e670" ;
}
.esri-icon-settings2 :before {
content : "\e671" ;
}
.esri-icon-share :before {
content : "\e672" ;
}
.esri-icon-sign-out :before {
content : "\e673" ;
}
.esri-icon-support :before {
content : "\e674" ;
}
.esri-icon-user :before {
content : "\e675" ;
}
.esri-icon-time-clock :before {
content : "\e676" ;
}
.esri-icon-trash :before {
content : "\e677" ;
}
.esri-icon-upload :before {
content : "\e678" ;
}
.esri-icon-download :before {
content : "\e679" ;
}
.esri-icon-zoom-in-magnifying-glass :before {
content : "\e67a" ;
}
.esri-icon-search :before {
content : "\e67b" ;
}
.esri-icon-zoom-out-magnifying-glass :before {
content : "\e67c" ;
}
.esri-icon-locked :before {
content : "\e67d" ;
}
.esri-icon-unlocked :before {
content : "\e67e" ;
}
.esri-icon-favorites :before {
content : "\e67f" ;
}
.esri-icon-compass :before {
content : "\e680" ;
}
.esri-icon-down :before {
content : "\e681" ;
}
.esri-icon-up :before {
content : "\e682" ;
}
.esri-icon-chat :before {
content : "\e683" ;
}
.esri-icon-dock-bottom :before {
content : "\e684" ;
}
.esri-icon-dock-left :before {
content : "\e685" ;
}
.esri-icon-dock-right :before {
content : "\e686" ;
}
.esri-icon-organization :before {
content : "\e687" ;
}
.esri-icon-north-navigation :before {
content : "\e688" ;
}
.esri-icon-locate-circled :before {
content : "\e689" ;
}
.esri-icon-dial :before {
content : "\e68a" ;
}
.esri-icon-polygon :before {
content : "\e68b" ;
}
.esri-icon-polyline :before {
content : "\e68c" ;
}
.esri-icon-visible :before {
content : "\e68d" ;
}
.esri-icon-non-visible :before {
content : "\e68e" ;
}
.esri-icon-link-vertical :before {
content : "\e68f" ;
}
.esri-icon-unlocked-link-vertical :before {
content : "\e690" ;
}
.esri-icon-link-horizontal :before {
content : "\e691" ;
}
.esri-icon-unlocked-link-horizontal :before {
content : "\e692" ;
}
.esri-icon-swap :before {
content : "\e693" ;
}
.esri-icon-cta-link-external :before {
content : "\e694" ;
}
.esri-icon-reply :before {
content : "\e695" ;
}
.esri-icon-public :before {
content : "\e696" ;
}
.esri-icon-share2 :before {
content : "\e697" ;
}
.esri-icon-launch-link-external :before {
content : "\e698" ;
}
.esri-icon-rotate-back :before {
content : "\e699" ;
}
.esri-icon-pan2 :before {
content : "\e69a" ;
}
.esri-icon-tracking :before {
content : "\e69b" ;
}
.esri-icon-expand2 :before {
content : "\e69c" ;
}
.esri-icon-arrow-down :before {
content : "\e69d" ;
}
.esri-icon-arrow-up :before {
content : "\e69e" ;
}
.esri-icon-hollow-eye :before {
content : "\e69f" ;
}
.esri-icon-play-circled :before {
content : "\e6a0" ;
}
.esri-icon-volume-off :before {
content : "\e6a1" ;
}
.esri-icon-volume-on :before {
content : "\e6a2" ;
}
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-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-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-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-authorize
\ue61c
esri-icon-blank-map-pin
\ue61e
esri-icon-beginning
\ue622
esri-icon-up-down-arrows
\ue629
esri-icon-announcement
\ue62c
esri-icon-notice-round
\ue62d
esri-icon-notice-triangle
\ue62e
esri-icon-layer-list
\ue633
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-close-circled
\ue640
esri-icon-collection
\ue642
esri-icon-configure-popup
\ue644
esri-icon-dashboard
\ue646
esri-icon-description
\ue648
esri-icon-directions
\ue649
esri-icon-directions2
\ue64a
esri-icon-documentation
\ue64b
esri-icon-duplicate
\ue64c
esri-icon-environment-settings
\ue64e
esri-icon-experimental
\ue651
esri-icon-feature-layer
\ue652
esri-icon-left-arrow
\ue65a
esri-icon-right-arrow
\ue65b
esri-icon-link-external
\ue65c
esri-icon-loading-indicator
\ue65e
esri-icon-marketplace
\ue660
esri-icon-navigation
\ue666
esri-icon-pie-chart
\ue669
esri-icon-line-chart
\ue66b
esri-icon-resend-invitation
\ue66d
esri-icon-settings2
\ue671
esri-icon-time-clock
\ue676
esri-icon-zoom-in-magnifying-glass
\ue67a
esri-icon-zoom-out-magnifying-glass
\ue67c
esri-icon-favorites
\ue67f
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-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-cta-link-external
\ue694
esri-icon-launch-link-external
\ue698
esri-icon-rotate-back
\ue699
esri-icon-arrow-down
\ue69d
esri-icon-hollow-eye
\ue69f
esri-icon-play-circled
\ue6a0
esri-icon-volume-off
\ue6a1
esri-icon-volume-on
\ue6a2