Icon

Icon component is a web component that displays an icon.

Examples Default Icon 
<>
<dap-ds-icon name="arrow-down-line" />
Pure css icon:
<svg className="dds-icon dds-icon--md" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"/></svg>
</>
Sizes

Icon component has built in sizes. Can be xs, sm, md, lg, xl, xxl. Default is md. You can also set the size in pixels using the staticSize attribute.

<dap-ds-stack>
<dap-ds-stack direction="row">
  <dap-ds-icon name="arrow-down-line" size="xs" />
  <dap-ds-icon name="arrow-down-line" size="sm" />
  <dap-ds-icon name="arrow-down-line" />
  <dap-ds-icon name="arrow-down-line" size="lg" />
  <dap-ds-icon name="arrow-down-line" size="xl" />
  <dap-ds-icon name="arrow-down-line" size="xxl" />
  <dap-ds-icon name="arrow-down-line" staticSize="70" />
</dap-ds-stack>
Pure css icons:
<dap-ds-stack direction="row">
  <svg className="dds-icon dds-icon--xs" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"/></svg>
  <svg className="dds-icon dds-icon--sm" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"/></svg>
  <svg className="dds-icon dds-icon--md" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"/></svg>
  <svg className="dds-icon dds-icon--lg" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"/></svg>
  <svg className="dds-icon dds-icon--xl" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"/></svg>
  <svg className="dds-icon dds-icon--xxl" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"/></svg>
  <svg style={{ width: 70, height: 70 }} viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.0001 16.1716L18.3641 10.8076L19.7783 12.2218L12.0001 20L4.22192 12.2218L5.63614 10.8076L11.0001 16.1716V4H13.0001V16.1716Z"/></svg>
</dap-ds-stack>
</dap-ds-stack>
Colors

Icon components by default get the color from the parent component, with the fill color set to currentColor. To set all the icon and dedicated icon components to a specific color, you can use the .dap-ds-icon class.

.dap-ds-icon, // this selects all the <dap-ds-icon> components
.dap-ds-icon::part(icon) // this selects all the dedicated icon components like <dap-ds-icon-xxx> 
{
  fill: var(--dds-high-contrast-interactive);
}
Custom icon

You can also use custom icons by adding the svg code inside the icon tag. The easiest way to do this is to copy the svg code from the icon you want to use from the Remix Icon website.

<>
<dap-ds-icon size="lg">
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    fill="currentColor">
    <path
      d="M4 12H7C8.10457 12 9 12.8954 9 14V19C9 20.1046 8.10457 21 7 21H4C2.89543 21 2 20.1046 2 19V12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12V19C22 20.1046 21.1046 21 20 21H17C15.8954 21 15 20.1046 15 19V14C15 12.8954 15.8954 12 17 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12Z"></path>
  </svg>
</dap-ds-icon>
<svg
  className="dds-icon dds-icon--lg"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  fill="currentColor">
  <path
    d="M4 12H7C8.10457 12 9 12.8954 9 14V19C9 20.1046 8.10457 21 7 21H4C2.89543 21 2 20.1046 2 19V12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12V19C22 20.1046 21.1046 21 20 21H17C15.8954 21 15 20.1046 15 19V14C15 12.8954 15.8954 12 17 12H20C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12Z"></path>
</svg>
</>
Dedicated icon components

All the built in icons have their own dedicated components. You can use them like this:

<dap-ds-icon-xxx />


<dap-ds-stack direction="row" >
<dap-ds-icon-checkbox-circle-fill />
<dap-ds-icon-arrow-down-line size="70" />
</dap-ds-stack>
Available icons
Arrows
Buildings
Business
Design
Device
Document
Health
Others
System
User
Importing 
import { DapDSIcon } from 'dap-design-system/dist/dds'
Importing React 
import { DapDSIconReact } from 'dap-design-system/dist/react'
Attributes
PropertyTypeDefaultDescription
namestringThe name of the icon
size'xxl', 'xl' , 'lg' , 'md' , 'sm' , 'xs''md'The size of the icon
staticSizenumber, undefinedThe size of the icon in pixels. This overrides the size attribute.
focusableboolean, undefinedfalseWhether the icon is focusable. Default is false.
ariaHiddenbooleanWhether the icon is hidden from the accessibility tree. Default is true.
ariaLabelstringThe aria label of the icon.
Slots
NameDescription
(default)The content of the icon for custom svg icons.
Events

No custom events available.

CSS Parts
Part NameDescription
baseThe main icon container.
iconThe icon of the icon.
CSS Custom Properties
Property NameDescription
--dds-icon-size-xsThe size of extra small icons (default: 12px)
--dds-icon-size-smThe size of small icons (default: 16px)
--dds-icon-size-mdThe size of medium icons (default: 20px)
--dds-icon-size-lgThe size of large icons (default: 24px)
--dds-icon-size-xlThe size of extra large icons (default: 32px)
--dds-icon-size-xxlThe size of extra extra large icons (default: 40px)