Calcite Design System

Calcite Design System is a collection of design and development resources for creating engaging, cohesive experiences across apps with minimal effort. It includes design best practices, icons, color schemes, and a rich web component library.

You can use Calcite in conjunction with the ArcGIS Maps SDK for JavaScript to build user-friendly web mapping applications. In fact, the design of the ArcGIS Maps SDK for JavaScript’s widgets are based on Calcite so the two libraries blend well in apps.

Calcite Icons

You can use UI icons in your application's interface by utilizing the <calcite-icon> component.

Generate a <calcite-icon> code snippet by selecting an icon from the drop-down list. For more information on using <calcite-icon> in your applications visit Calcite Design System icons documentation.

Calcite Icon Example
Use dark colors for code blocksCopy
1 2 3 4 5 6 7 8 9 10
1
2
3
4
5
6
7
8
9
10
<!--
https://developers.arcgis.com/calcite-design-system/components/icon/
scale="s" (16px)
scale="m" (24px) default
scale="l" (32px)
-->
<calcite-icon
  icon="full-screen-exit"
  text-label="Label for full-screen-exit">
</calcite-icon>

Calcite Components

Calcite components are set of configurable, purpose-built web components for building great web experiences.

Use the drop-down list to explore various ArcGIS Maps SDK for JavaScript samples using Calcite components and discover how they can be used in your own application. For a complete list of components, an interactive configuration experience, and usage guidelines, see the full Calcite Design System components documentation.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.