Icon

Render svg component with Hope UI styling features.

Import

tsx
import { Icon } from "@hope-ui/core";

tsx
import { Icon } from "@hope-ui/core";

Usage with a third-party icon library

The Icon component accept an as prop, which you can use to render icon from third-party libraries.

tsx
import { Icon } from "@hope-ui/core";
import { PlusIcon } from "some-icon-library";
function Demo() {
  return <Icon as={PlusIcon} />;
}

tsx
import { Icon } from "@hope-ui/core";
import { PlusIcon } from "some-icon-library";
function Demo() {
  return <Icon as={PlusIcon} />;
}

Creating custom icon

Hope UI provides two methods for creating custom icons:

• The Icon component
• The createIcon function

Using the Icon component

Icon render an svg element and can be used to create custom icon components.

tsx
import { Icon, IconProps } from "@hope-ui/core";
function BoxIcon(props: IconProps) {
  return (
    <Icon viewBox="0 0 24 24" {...props}>
      <path
        d="m20 7l-8-4l-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
      />
    </Icon>
  );
}
function Demo() {
  // Use the icon and pass style props, if needed
  return <BoxIcon color="neutral.700" boxSize="24px" />;
}

tsx
import { Icon, IconProps } from "@hope-ui/core";
function BoxIcon(props: IconProps) {
  return (
    <Icon viewBox="0 0 24 24" {...props}>
      <path
        d="m20 7l-8-4l-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
        fill="none"
        stroke="currentColor"
        stroke-linecap="round"
        stroke-linejoin="round"
        stroke-width="2"
      />
    </Icon>
  );
}
function Demo() {
  // Use the icon and pass style props, if needed
  return <BoxIcon color="neutral.700" boxSize="24px" />;
}

Using the createIcon function

You can use the createIcon function to achieve the same functionality with less effort.

tsx
import { createIcon } from "@hope-ui/core";
const BoxIcon = createIcon({
  viewBox: "0 0 24 24",
  path: () => (
    <path
      d="m20 7l-8-4l-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
    />
  ),
});

tsx
import { createIcon } from "@hope-ui/core";
const BoxIcon = createIcon({
  viewBox: "0 0 24 24",
  path: () => (
    <path
      d="m20 7l-8-4l-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
    />
  ),
});

Tips for generating icon from design tools

• Export icons as svg from your design tool (Sketch, Figma, etc...).
• Use a tool like SVGminify to reduce the size and minify the markup.
• To use the color style prop, set the fill or stroke prop of your svg path to currentColor.

Fallback icon

Icon will render a fallback when children is not provided.

tsx
<Icon />

tsx
<Icon />

Props

Icon

Icon supports any svg attributes, Hope UI's style props and sx.

createIcon