{
  "id": "uilib/components/icon",
  "name": "Icon",
  "description": "The main Icon component is basically a wrapper for whatever icon you place within it.",
  "group": "components",
  "slug": "/uilib/components/icon/",
  "props": [
    {
      "name": "icon",
      "doc": "Defines the [primary icon](/icons/primary) to be used, as a string.",
      "type": "string",
      "status": "required",
      "defaultValue": null
    },
    {
      "name": "title",
      "doc": "Use a title to provide extra information about the icon used.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "border",
      "doc": "use `true` to display a rounded border with an inherited color. Keep in mind that the icon will have a larger total width and height of `+0.5em`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "alt",
      "doc": "the alternative label (text version) of the icon. Defaults to the imported icon name.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "size",
      "doc": "the dimension of the icon. This will be the `viewBox` and represent `width` and `height`. Defaults to `16`. You can use `small`,`medium`, `large` or `auto`. Auto will enable that the icon size gets inherited by the parent HTML element if it provides a `font-size`.",
      "type": [
        "small",
        "medium",
        "large",
        "default",
        "x-large",
        "xx-large",
        "auto",
        "basis",
        "number"
      ],
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "color",
      "doc": "the color can be any valid color property, such as Hex, RGB or preferable – any CSS variable from the [colors table](/uilib/usage/customisation/colors), e.g. `var(--color-ocean-green)`. Default is no color, which means `--color-black-80`.",
      "type": "Various",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "inheritColor",
      "doc": "Defaults to `true`. Set to `false` if you do not want to inherit the color by `currentColor`.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "modifier",
      "doc": "modifier class to define. Will result in: `dnb-icon--${modifier}`.",
      "type": "string",
      "status": "optional",
      "defaultValue": null
    },
    {
      "name": "skeleton",
      "doc": "If set to `true`, an overlaying skeleton with animation will be shown.",
      "type": "boolean",
      "status": "optional",
      "defaultValue": null
    }
  ],
  "events": [],
  "related": [
    "Icon",
    "Space"
  ],
  "checksum": "2b6ae6b80f9f81b8abebebf24175f8bd69639383d62cb6af766da6fa96d54f63",
  "source": {
    "repo": "https://github.com/dnbexperience/eufemia",
    "file": "packages/dnb-eufemia/src/components/icon/Icon.tsx",
    "permalink": "https://github.com/dnbexperience/eufemia/blob/main/packages/dnb-eufemia/src/components/icon/Icon.tsx"
  },
  "sources": {
    "entry": {
      "local": "src/docs/uilib/components/icon.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/icon/"
    },
    "props": {
      "local": "src/docs/uilib/components/icon/properties.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/icon/properties/"
    },
    "events": null,
    "demos": {
      "local": "src/docs/uilib/components/icon/demos.mdx",
      "public": "https://c301bb6f.eufemia-e25.pages.dev/uilib/components/icon/demos/"
    }
  },
  "version": "0.0.0-development",
  "generatedAt": "2025-12-18T11:12:44.023Z",
  "schemaVersion": 1
}