@port-labs/anchor-icons

Icon set for Port's Anchor UI design system, shipped as ready-to-use React components.

Icons are pre-compiled to React components at build time, so the package works in any React 19 bundler (Vite, Next.js, webpack, Remix, esbuild) — no vite-plugin-svgr or other bundler plugin required in the consuming app.

Install

npm install @port-labs/anchor-icons
# peer deps
npm install react react-dom

Usage

import { Add, GithubActions } from '@port-labs/anchor-icons';

export function Toolbar() {
	return (
		<button>
			<Add />
			Add resource
		</button>
	);
}

Each icon is a standard SVG React component:

• Renders at 1em so it scales with the surrounding font-size.
• Monochrome icons use fill="currentColor", so they inherit the CSS color of their container. Brand/product icons keep their own colors.
• Accepts every SVGProps<SVGSVGElement> (className, style, color, width, height, onClick, …) and forwards ref to the underlying <svg>.
• Defaults to aria-hidden="true"; pass aria-hidden={false} and a title/aria-label for a meaningful, announced icon.

<Add className="text-blue-500" width={24} height={24} />

Peer dependencies

| Package | Range | | ----------- | --------- | | react | ^19.0.0 | | react-dom | ^19.0.0 |

License

ISC.