@autoguru/icons

Icons and illustrations that support product at AutoGuru.

A tree-shakeable React icon library combining bespoke AutoGuru icons with the Phosphor icon set, mirroring the AutoGuru Design System. Every icon is an individual component, so you only ship what you import.

• 1,500+ icons across 20 categories — see the category reference
• Tree-shakeable — sideEffects: false, one component per icon
• Themeable — icons inherit colour via currentColor and scale to any size
• Typed — ships TypeScript definitions for every icon

Install

yarn add @autoguru/icons react

react (>=16.8) is a peer dependency.

Usage

Icons are React components. Render them through the Icon component from @autoguru/overdrive:

import { UserSquareIcon } from '@autoguru/icons';
import { Icon } from '@autoguru/overdrive';

<Icon icon={UserSquareIcon} size={16} />;

Or render directly — icons take currentColor, so colour and size are controlled by their container:

import { CarIcon } from '@autoguru/icons';

<span style={{ color: 'tomato', width: 24, height: 24, display: 'inline-flex' }}>
	<CarIcon />
</span>;

Naming

Each icon is exported as PascalCase + Icon, derived from its kebab-case source filename:

| Source SVG | Export | | ------------------- | ---------------- | | arrow-left.svg | ArrowLeftIcon | | user-square.svg | UserSquareIcon | | magnifying-glass.svg | MagnifyingGlassIcon |

Categories

All 1,577 icons are grouped into 20 categories. Open the category reference for the full illustrated index (every icon with a preview and its export name), or jump straight to a category:

| Category | Icons | Category | Icons | | --- | --: | --- | --: | | AutoGuru | 45 | Filled | 9 | | Arrows | 121 | Brands | 89 | | Commerce | 176 | Communication | 73 | | Design | 133 | Development | 29 | | Education | 19 | Games | 73 | | Health & Wellness | 27 | Maps & Travel | 99 | | Math & Finance | 83 | Media | 111 | | Office & Editing | 131 | People | 69 | | Security & Warnings | 44 | System & Devices | 156 | | Time | 28 | Weather & Nature | 62 |

Finding an icon

• Browse the category reference or search phosphoricons.com.
• The Phosphor icon arrow-square-out is exported here as ArrowSquareOutIcon.

Contributing

Adding an icon

1. Drop the optimised SVG into icons/ with a kebab-case filename (e.g. car-key.svg). The filename becomes the export name — car-key.svg → CarKeyIcon.

2. Keep the source clean: a single viewBox, currentColor / black fills, none strokes, and no inline width/height. SVGs are run through svgo during the build, but we want the source tidy too.

3. Add the icon's category to categories/categories.json ("car-key": "AutoGuru"), then refresh the reference:

   node categories/generate.js   # regenerates the category reference

4. Run yarn build.

The base icon set was sourced from Phosphor (regular weight) plus bespoke AutoGuru designs; those SVGs now live directly in icons/, so there's no external icon dependency.

Building

yarn generate   # SVGs -> React components + index.ts
yarn build      # generate, then compile CJS + ESM + type definitions

scripts/build.js turns the SVGs into components and the generated index.ts. The categories/ reference is separate, standalone documentation produced by categories/generate.js from categories/categories.json — it is not part of the build and the package exports no category metadata.

License

MIT © AutoGuru