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 to build user-friendly web mapping applications. In fact, the design of the ’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
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="add-constant"
  text-label="Label for add-constant">
</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 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.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close