Skip to content
Stylus UI

Icon

New
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 { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
import { faFire } from "@fortawesome/pro-duotone-svg-icons";
// Custom imports
import { rectangleHistorySparkle } from "stylus-icons/regular";
import { gearPen } from "stylus-icons/solid";
import { circleDotSparkle } from "stylus-icons/duotone";


export default () => (
  <div className="flex items-center gap-2 text-xl">
    <Icon icon={faHome} className="text-slate-600" />
    <Icon icon={faCirclePlus} className="text-green-500" />
    <Icon icon={faFire} className="text-red-500" />
    <Icon icon={rectangleHistorySparkle} className="text-yellow-500" />
    <Icon icon={gearPen} className="text-slate-600" />
    <Icon icon={circleDotSparkle} className="text-brand-500" />
  </div>
);

API Reference

Icon

Prop
Type
Default
icon Required IconDefinition
className string
title string