Icon

Visually communicate an idea or action in a limited space, using FontAwesome or a custom SVG.

Usage

To display an Icon, import an icon from one of the FontAwesome packages or from stylus-icon. For more information, see the Icons guide.

import { Icon } from "stylus-ui/Icon";
// FontAwesome imports
import { faHome } from "@fortawesome/pro-regular-svg-icons";
import { faSparkles } from "@fortawesome/pro-solid-svg-icons";
import { faFire } from "@fortawesome/pro-duotone-svg-icons";
// Custom imports
import { translateSparkle } from "stylus-icons/regular";

export default () => (
  <div className="flex items-center gap-2 text-xl">
    <Icon icon={faHome} />
    <Icon icon={faSparkles} />
    <Icon icon={faFire} />
    <Icon icon={translateSparkle} />
  </div>
);

API Reference

`Icon`

Prop	Type	Default
`icon`	`IconDefinition`
`className`	`string`
`title`	`string`