• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Examples
    1. Different sizes
    2. Color
    3. With custom SVG icon
  2. Available icons
  3. Properties
  4. Slots
  5. Shadow Parts
  6. Dependencies
    1. Used by
    2. Graph
Components Icon
(external link)

ld-icon #

An icon provides a visual hint for content or interactions. Combine it with textual information for a better user experience. When using an icon on its own, make sure to either apply an aria-label or use the ld-sr-only component.

Examples #

<ld-icon name="placeholder"></ld-icon>
<span class="ld-icon" role="presentation">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>
<LdIcon name="placeholder" />

Different sizes #

<ld-icon name="placeholder" size="sm"></ld-icon>

<ld-icon name="placeholder"></ld-icon>

<ld-icon name="placeholder" size="lg"></ld-icon>
<span class="ld-icon ld-icon--sm" role="presentation">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>

<span class="ld-icon" role="presentation">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>

<span class="ld-icon ld-icon--lg" role="presentation">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>
<LdIcon name="placeholder" size="sm" />

<LdIcon name="placeholder" />

<LdIcon name="placeholder" size="lg" />

Color #

Liquid's icons use the currentColor value for fills or strokes, which means that you can adjust the icon color by setting the color property value of the ld-icon component or a wrapping element.

<ld-icon name="placeholder" style="color: var(--ld-col-vc)"></ld-icon>

<span style="color: var(--ld-col-vg)">
  <ld-icon name="placeholder"></ld-icon>
</span>
<span class="ld-icon" role="presentation" style="color: var(--ld-col-vc)">
  <svg viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>

<span style="color: var(--ld-col-vg)">
  <span class="ld-icon" role="presentation">
    <svg viewBox="0 0 24 24" fill="none">
      <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
      <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
    </svg>
  </span>
</span>
<LdIcon name="placeholder" style={ { color: 'var(--ld-col-vc)' } } />

<span style={ { color: 'var(--ld-col-vg)' } }>
  <LdIcon name="placeholder" />
</span>

With custom SVG icon #

<ld-icon>
  <svg viewBox="0 0 24 24"><path fill="currentColor" d="M16.48 20.335a3.622 3.622 0 01-7.244 0h7.244zm2.748-6.48l2.024 1.94c.297.284.464.677.464 1.088v.801c0 .833-.675 1.51-1.508 1.51h-14.7A1.51 1.51 0 014 17.683v-.76c0-.434.188-.848.516-1.134l1.922-1.683c.328-.286.516-.7.516-1.135V8.858a5.878 5.878 0 013.498-5.37c.556-.249.931-.78.931-1.39v-.622a1.476 1.476 0 112.952 0v.622c0 .61.375 1.141.931 1.39 2.06.918 3.5 2.97 3.5 5.37v3.908c0 .411.167.805.463 1.09z" fill-rule="evenodd"/></svg>
</ld-icon>
<span class="ld-icon" role="presentation">
  <svg viewBox="0 0 24 24"><path fill="currentColor" d="M16.48 20.335a3.622 3.622 0 01-7.244 0h7.244zm2.748-6.48l2.024 1.94c.297.284.464.677.464 1.088v.801c0 .833-.675 1.51-1.508 1.51h-14.7A1.51 1.51 0 014 17.683v-.76c0-.434.188-.848.516-1.134l1.922-1.683c.328-.286.516-.7.516-1.135V8.858a5.878 5.878 0 013.498-5.37c.556-.249.931-.78.931-1.39v-.622a1.476 1.476 0 112.952 0v.622c0 .61.375 1.141.931 1.39 2.06.918 3.5 2.97 3.5 5.37v3.908c0 .411.167.805.463 1.09z" fill-rule="evenodd"/></svg>
</span>
<LdIcon>
  <svg viewBox="0 0 24 24"><path fill="currentColor" d="M16.48 20.335a3.622 3.622 0 01-7.244 0h7.244zm2.748-6.48l2.024 1.94c.297.284.464.677.464 1.088v.801c0 .833-.675 1.51-1.508 1.51h-14.7A1.51 1.51 0 014 17.683v-.76c0-.434.188-.848.516-1.134l1.922-1.683c.328-.286.516-.7.516-1.135V8.858a5.878 5.878 0 013.498-5.37c.556-.249.931-.78.931-1.39v-.622a1.476 1.476 0 112.952 0v.622c0 .61.375 1.141.931 1.39 2.06.918 3.5 2.97 3.5 5.37v3.908c0 .411.167.805.463 1.09z" fillRule="evenodd"/></svg>
</LdIcon>

Available icons #

All icons listed below are bundled with Liquid. As a developer, you don't need to download any of the icons. Just use the ld-icon component and insert the name of the desired icon, as illustrated in the examples above. Right-click on the icons below to copy their technical names for use in the ld-icon component.

Left-click an icon below to download its SVG file. To download all icons at once, use this button:

Download all icons

Properties #

Property Attribute Description Type Default
key key for tracking the node's identity when working with lists string | number undefined
name name The icon name. string null
ref ref reference to component any undefined
size size Size of the icon. "lg" | "sm" undefined

Slots #

Slot Description
(optional) Custom SVG icon (only valid without name prop).

Shadow Parts #

Part Description
"icon" Actual SVG element

Dependencies #

Used by #

  • ld-accordion-toggle
  • ld-badge
  • ld-cookie-consent
  • ld-header
  • ld-input-message
  • ld-notice
  • ld-pagination
  • ld-select-popper
  • ld-sidenav-header
  • ld-sidenav-navitem
  • ld-sidenav-toggle-outside
  • ld-step
  • ld-table-header

Graph #

graph TD;
  ld-accordion-toggle --> ld-icon
  ld-badge --> ld-icon
  ld-cookie-consent --> ld-icon
  ld-header --> ld-icon
  ld-input-message --> ld-icon
  ld-notice --> ld-icon
  ld-pagination --> ld-icon
  ld-select-popper --> ld-icon
  ld-sidenav-header --> ld-icon
  ld-sidenav-navitem --> ld-icon
  ld-sidenav-toggle-outside --> ld-icon
  ld-step --> ld-icon
  ld-table-header --> ld-icon
  style ld-icon fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS