Skip to main content

⚙️ Icons API

Widely available

Most React icon libraries support this format. Check, for example, react-icons, phosphor-icons, heroicons etc.

Koval UI supports of external icons. When some component in the library exposes icon (prefixIcon, suffixIcon) it expects a React component which is compatible with SVGProps<SVGSVGElement> type. SVG CSS style has to support currentColor keyword.

Prefix and suffix icons​

Button and various input components support prefix and suffix props, which can be used to extend your component with icon.

icon weight

Set weight="fill" to enable this visual style in your app.

Button with prefix and suffix icons​

Result
Loading...
Live Editor
//import {AlienIcon, FlyingSaucerIcon} from '@phosphor-icons/react';

function Example(props) {
  return (
    <div>
      <Button prefix={AlienIcon} suffix={FlyingSaucerIcon}>
        Hello, World!
      </Button>
    </div>
  );
}

InputText with prefix icon​

Result
Loading...
Live Editor
//import {AlienIcon} from '@phosphor-icons/react';

function Example(props) {
  return (
    <div>
      <InputText prefix={AlienIcon} placeholder="Hello, World!" />
    </div>
  );
}