Icon

Examples

Colors

Icons inherit their color from the current text color. Thus, you can set the color property on the <ods-icon> element or an ancestor to change the color.

<div class='flex gap-4 text-xl mb-2 text-blue-500'>
  <ods-icon name="trash" class='text-green-500 text-3xl'></ods-icon>
  <ods-icon name="trash" class="text-3xl"></ods-icon>
</div>

import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <div className='flex gap-4 text-xl mb-2 text-blue-500'>
        <OdsIcon name="trash" className='text-green-500 text-3xl' />
        <OdsIcon name="trash" className="text-3xl"/>
    </div>
  )
}

export default Example;

Sizing

Icons are sized relative to the current font size or independently.

<div class='flex flex-col gap-16'>
  <div class="flex flex-wrap gap-16">
      <ods-icon class="text-sm" name="trash"></ods-icon>
      <ods-icon class="text-md" name="trash"></ods-icon>
      <ods-icon class="text-lg" name="trash"></ods-icon>
      <ods-icon class="text-xl" name="trash"></ods-icon>
      <ods-icon class="text-2xl" name="trash"></ods-icon>
      <ods-icon class="text-3xl" name="trash"></ods-icon>
  </div>
</div>

import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <div className='flex flex-col'>
      <div className="flex flex-wrap gap-16">
          <OdsIcon className="text-sm" name="trash" />
          <OdsIcon className="text-md" name="trash" />
          <OdsIcon className="text-lg" name="trash" />
          <OdsIcon className="text-xl" name="trash" />
          <OdsIcon className="text-2xl" name="trash" />
          <OdsIcon className="text-3xl" name="trash" />
      </div>
    </div>
  )
}

export default Example;

Labels

For non-decorative icons, use the label attribute to announce it to assistive devices.

<ods-icon name="trash" class="text-3xl" label="Add to favorites"></ods-icon>

import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsIcon name="trash" className="text-3xl" label="Add to favorites" />
  )
}

export default Example;

Custom Icon

Custom icons can be loaded individually with the src attribute. Only SVGs on a local or CORS-enabled endpoint are supported. If you’re using more than one custom icon, it might make sense to register a custom icon library.

<ods-icon src="https://shoelace.style/assets/images/shoe.svg" class='text-5xl'></ods-icon>

import { OdsIcon } from '@ods/components/react.icon';

const Example = () => {
  return (
    <OdsIcon src="https://shoelace.style/assets/images/shoe.svg" className='text-5xl'></OdsIcon>
  )
}

export default Example;

Importing

import '@ods/components/web.icon';

import { OdsIcon } from '@ods/components/react.icon';

import { OdsIcon } from '@ods/components/react.icon';