Icon

Variants

Default

  <span
    data-testid="govie-icon"
    role="presentation"
    class="
      material-symbols-outlined
      gi-block
      gi-text-[16px]
    ">
    thumb_up
  </span>

  {{ govieIcon({
    "icon": "thumb_up",
    "size": "sm"
  }) }}

import { Icon } from '@govie-ds/react';

<Icon
  icon="thumb_up"
  size="sm"
/>

Usage

Best Practices

When to use this component

Use the Icon component to represent actions, states, or elements that benefit from visual identification. Icons work well in buttons, inputs, or alongside text.

When not to use this component

Avoid using icons as the sole indicator of critical information, as they can be misinterpreted without labels. If an icon lacks clear meaning, consider adding text or choosing another component.

Status