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.
<!--
https://developers.arcgis.com/calcite-design-system/components/icon/
scale="s" (16px)
scale="m" (24px) default
scale="l" (32px)
-->
<calcite-icon
icon="magnifying-glass-plus"
text-label="Label for magnifying-glass-plus">
</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.