@apify/ui-icons

Browse icons at the hosted Storybook.

Apify's icon set as ~280 typed React components, generated from SVGs via SVGR. Each icon ships with a viewBox (so it scales), accepts a size prop, and uses currentColor for fill (so it inherits text color and respects theming).

Drop-in replacement for the older @apify-packages/icons package — same import shape, broader icon set.

Install

pnpm add @apify/ui-icons

Peer dependencies (install in your project if not already there):

• react 17.x · 18.x · 19.x
• react-dom 17.x · 18.x · 19.x

No styled-components requirement — icons are plain SVG React components.

Quick start

import { ChevronRightIcon, SettingsIcon } from '@apify/ui-icons';

export const SettingsLink = () => (
    <a href="/settings">
        <SettingsIcon size="16" title="Settings" />
        Settings
        <ChevronRightIcon size="12" />
    </a>
);

Every icon accepts:

• size?: string — pixel size as a string ('12', '16', '24', …). Default '24'.
• title?: string + titleId?: string — accessible name. Omit for purely decorative icons (consumer should add aria-hidden).
• className?: string — passed through to the <svg> element.

To recolor an icon, set the color of its parent (e.g. a button or text node). The SVG fill is currentColor.

What's inside

• ~280 icons covering navigation (ChevronRightIcon, ArrowSortIcon), state (CheckIcon, MinusIcon, AlertIcon), surfaces (SettingsIcon, BellIcon, BookmarkIcon), and Apify-specific concepts (ActorIcon, DatasetIcon).
• Typed — each component is a FC<IconProps> with size, title, titleId, className props.
• Themeable — fill="currentColor" everywhere, so color comes from the parent's CSS color.
• Tree-shakeable — each icon is a named export, bundlers drop the unused ones.

Browse the full catalog in Storybook (see below).

Storybook

From the repository root:

pnpm run storybook

The icon catalog lives in the shared Storybook at http://localhost:6007 under "Iconography".

Contributing

See CONTRIBUTING.md for how to add a new icon (SVGR workflow), build instructions, and the accessibility notes.