Icon

Overview (v1)

Source: ./src/components/icon/v1/Overview.mdx

Icon

The icon component allows users to display any icon from the OTTO components library. It has attributes for setting the icon type, size, and color. Find all available logos on the All icons page.

Default variation

Story Default:

<oc-icon-v1 type="success-hint"></oc-icon-v1>

Configuration

The icon component offers a variety of styling variants such as default and error. This component is configurable, allowing you to tailor its features and appearance to your specific needs. To explore all the available options and adjust the component, use the component configurator and see the changes affect the component in real-time.

Usage guidelines

Before integrating the icon component into your project, make sure you have correctly installed the OTTO components package. Look through the variations page for examples of possible component variations. Here, you can discover both common and specific variations that address different use cases.

Info

See the Icon UX documentation for detailed user experience guidelines and best practices on icon usage.

Icon sizes

The icon component comes in two sizes: 100 and 50.

Icon 100 vs Icon 50

The standard size used for most Icons is 100 (24x24px). The smaller alternative size is 50 (12x12px). Since not all icons would be recognizable in size 50, only a subset of the icons is available in this size.

Custom Size

All icons are SVGs and can be scaled to any size if needed. To adjust the size of the icon, you can set the width and height with a CSS-class or inline style.

Setting the size via CSS-class

Setting the size via CSS-class is recommended as it allows you to apply the same size to multiple icons.

<!-- CSS-class -->
<!-- Make sure to apply the class on the element oc-icon-v1 in order to achieve the desired specificity. -->

<style>
  oc-icon-v1.your-custom-class {
    width: 48px;
    height: 48px;
  }
</style>
<oc-icon-v1 type="wishlist" class="your-custom-class"></oc-icon-v1>

Setting the size via inline style

Setting the size via inline style does not require you to create a CSS-class, but it is less reusable.

<!-- inline style -->

<oc-icon-v1 type="wishlist" style="width: 48px; height: 48px;"></oc-icon-v1>

Accessibility

The icon component comes with a set of built-in accessibility features to ensure a seamless experience for all users.

ARIA hidden

If an icon is purely decorative and adds no information to the content, it should be visible to users but hidden from assistive technologies. This is the default behavior except for the oc-aria-label attribute, which makes the icon component recognizable by assistive technologies.

Use oc-aria-label

To make the icon recognizable for screen readers, use the oc-aria-label attribute to provide clear and descriptive context information. See the general accessibility documentation for guidance on using oc-aria-label, including how it works with link and masked link behavior.

Further reading

• aria-hidden
• aria-label

Configuration (v1)

Source: ./src/components/icon/v1/Configuration.mdx

Icon configuration

Configure the icon component with the controls below and see the changes live in the preview canvas. Click the Show code button within the preview canvas to see the source code for the current component configuration.

Story Default:

<oc-icon-v1 type="success-hint"></oc-icon-v1>

Interactive configurator (Storybook controls); every option is listed in the API section of this file.

All Icons (AllIcons.stories.ts)

All Icons

Story: components-icon-all-icons--all-icons · tags:

<icon-showcase-gallery version="v1"></icon-showcase-gallery>

{
  render() {
    return html`<icon-showcase-gallery version="v1"></icon-showcase-gallery>`;
  }
}

API v1

Source: ./src/components/icon/v1/IconV1.API.g.mdx

Icon v1 API

API: <oc-icon-v1> (IconV1)

The {Latest.default.name.toLowerCase()} component allows users to display any icon from the OTTO components library. It has attributes for setting the icon type, size, and color. Find all available icons here.

Attributes / properties

Events

CSS custom properties

Variations (v1)

Source: ./src/components/icon/v1/Variations.mdx

Variations

Listed below are the most common variations of the icon component as well as specific component variations for different use cases.

You can explore all available options using the component configurator, adjust the component to your needs, and see the changes live in a preview canvas.

Default

Story: components-icon-variations--default · tags: components

The default configuration uses size=100 and type=success-hint.

<oc-icon-v1 type="success-hint"></oc-icon-v1>

Icon 50

Story: components-icon-variations--icon-50 · tags: components

Variation of the default configuration with size=50.

Args: size=50, oc-aria-label=This is a 50px icon

<oc-icon-v1 type="success-hint" size="50" oc-aria-label="This is a 50px icon"></oc-icon-v1>

Demo custom size

Story: components-icon-variations--demo-icon-with-custom-size · tags: components

Variation with a custom size using the attributes width and height.

<oc-icon-v1 type="wishlist" style="width: 48px; height: 48px;"></oc-icon-v1>

{
  name: "Demo custom size",
  parameters: {
    controls: {
      disabled: true
    }
  },
  argTypes: hideControlsBadge(Metadata),
  render() {
    return html`<oc-icon-v1 type="wishlist" style="width: 48px; height: 48px;"></oc-icon-v1>`;
  }
}

Demo animation

Story: components-icon-variations--demo-animation · tags: components

Demo with animation on click.

<oc-icon-v1 type="wishlist"></oc-icon-v1>
<script>
  (() => {
    const icon = document.querySelector("oc-icon-v1");
    const type = "animated-wishlist-active-highlight";
    icon.addEventListener("click", () => {
      if (icon.getAttribute("type") === type) {
        icon.style.color = "";
        icon.setAttribute("type", "wishlist");
      } else {
        icon.style.color = "var(--oc-semantic-color-background-brand, #eb001f)";

        icon.setAttribute("type", type);
      }
    });
  })();
</script>

{
  name: "Demo animation",
  parameters: {
    controls: {
      disabled: true
    }
  },
  render() {
    return html`<oc-icon-v1 type="wishlist"></oc-icon-v1>
      <script>
        (() => {
          const icon = document.querySelector("oc-icon-v1");
          const type = "animated-wishlist-active-highlight";
          icon.addEventListener("click", () => {
            if (icon.getAttribute("type") === type) {
              icon.style.color = "";
              icon.setAttribute("type", "wishlist");
            } else {
              icon.style.color = "var(--oc-semantic-color-background-brand, #eb001f)";

              icon.setAttribute("type", type);
            }
          });
        })();
      </script> `;
  }
}

Interaction tests (IconV1.interactions.stories.ts)

Interaction test stories (automated tests, not usage patterns).

Vertical Align

Story: components-icon-interaction-tests--vertical-align · tags: play-fn

<h1>
  vertical-align: baseline (default)
  <svg width="24px" height="24px" style=" display: inline-block; background: lightgreen">
    <!-- just for compare-->
  </svg>
  <oc-icon-v1 type="success-hint" size="100"></oc-icon-v1>
</h1>
<h2>
  vertical-align: bottom
  <svg
    width="12px"
    height="12px"
    style="vertical-align: bottom; display: inline-block; background: lightgreen"
  >
    <!-- just for compare-->
  </svg>
  <oc-icon-v1 style="vertical-align: bottom;" type="success-hint" size="50"></oc-icon-v1>
</h2>

<h2>
  vertical-align: top
  <svg
    width="12px"
    height="12px"
    style="vertical-align: top; display: inline-block; background: lightgreen"
  >
    <!-- just for compare-->
  </svg>
  <oc-icon-v1 style="vertical-align: top;" type="success-hint" size="50"></oc-icon-v1>
</h2>
<h2>
  vertical-align: middle
  <svg
    width="12px"
    height="12px"
    style="vertical-align: middle; display: inline-block; background: lightgreen"
  >
    <!-- just for compare-->
  </svg>
  <oc-icon-v1 style="vertical-align: middle;" type="success-hint" size="50"></oc-icon-v1>
</h2>
<h2>
  vertical-align: text-top
  <svg
    width="12px"
    height="12px"
    style="vertical-align: text-top; display: inline-block; background: lightgreen"
  >
    <!-- just for compare-->
  </svg>
  <oc-icon-v1 style="vertical-align: text-top;" type="success-hint" size="50"></oc-icon-v1>
</h2>
<h2>
  vertical-align: text-bottom
  <svg
    width="12px"
    height="12px"
    style="vertical-align: text-bottom; display: inline-block; background: lightgreen"
  >
    <!-- just for compare-->
  </svg>
  <oc-icon-v1 style="vertical-align: text-bottom;" type="success-hint" size="50"></oc-icon-v1>
</h2>

{
  render() {
    return html`
      <h1>
        vertical-align: baseline (default)
        <svg width="24px" height="24px" style=" display: inline-block; background: lightgreen">
          <!-- just for compare-->
        </svg>
        <oc-icon-v1 type="success-hint" size="100"></oc-icon-v1>
      </h1>
      <h2>
        vertical-align: bottom
        <svg
          width="12px"
          height="12px"
          style="vertical-align: bottom; display: inline-block; background: lightgreen"
        >
          <!-- just for compare-->
        </svg>
        <oc-icon-v1 style="vertical-align: bottom;" type="success-hint" size="50"></oc-icon-v1>
      </h2>

      <h2>
        vertical-align: top
        <svg
          width="12px"
          height="12px"
          style="vertical-align: top; display: inline-block; background: lightgreen"
        >
          <!-- just for compare-->
        </svg>
        <oc-icon-v1 style="vertical-align: top;" type="success-hint" size="50"></oc-icon-v1>
      </h2>
      <h2>
        vertical-align: middle
        <svg
          width="12px"
          height="12px"
          style="vertical-align: middle; display: inline-block; background: lightgreen"
        >
          <!-- just for compare-->
        </svg>
        <oc-icon-v1 style="vertical-align: middle;" type="success-hint" size="50"></oc-icon-v1>
      </h2>
      <h2>
        vertical-align: text-top
        <svg
          width="12px"
          height="12px"
          style="vertical-align: text-top; display: inline-block; background: lightgreen"
        >
          <!-- just for compare-->
        </svg>
        <oc-icon-v1 style="vertical-align: text-top;" type="success-hint" size="50"></oc-icon-v1>
      </h2>
      <h2>
        vertical-align: text-bottom
        <svg
          width="12px"
          height="12px"
          style="vertical-align: text-bottom; display: inline-block; background: lightgreen"
        >
          <!-- just for compare-->
        </svg>
        <oc-icon-v1 style="vertical-align: text-bottom;" type="success-hint" size="50"></oc-icon-v1>
      </h2>
    `;
  },
  async play({
    canvasElement
  }) {
    const dummySvgs = Array.from(canvasElement.getElementsByTagName("svg"));
    const icons = Array.from(canvasElement.getElementsByTagName("oc-icon-v1"));
    icons.forEach(icon => {
      icon.style.background = "lightgreen";
      icon.style.maskImage = "unset";
    });
    await Promise.all(icons.map(async (icon, i) => {
      await expect(icon.getBoundingClientRect().y, `icon${i} y should match svg${i} y`).toBe(dummySvgs[i].getBoundingClientRect().y);
    }));
  }
}

All icon names

487 icon files (pl_icon_<name>.svg) are referenced by the component CSS; each is saved as a standalone SVG in Svg folder. Names ending in 50 are the small-size (size="50") drawings of the same icon. Use the name without the pl_icon_ prefix as type on <oc-icon-v1> (or icon, icon-left, ... on other components).

Not downloadable (HTTP 403, animated icon implemented in the component itself): pl_icon_animated-wishlist-active-highlight