marcus/marcus-skills/roc-icons

Roc Icons (@marcus/roc)

Handcrafted SVG icon library with 416 icons across 4 styles. Use this skill when adding, replacing, or configuring icons in any project.

Browse all icons: https://roc.haplab.com

Install

npm install @marcus/roc

Requires Node.js 22+.

Styles

Pick one style per context. Don't mix outline and solid in the same toolbar.

React

import { Home, Bell, Search } from '@marcus/roc/react/outline';
<Home size={20} className="text-gray-500" />
<Bell size={20} />
<Search size={16} />  {/* stroke auto-adjusts to 1.75 at <=16px */}

Import patterns

// Single style barrel import
import { Home, Bell } from '@marcus/roc/react/outline';
import { Home, Bell } from '@marcus/roc/react/solid';
import { Home, Bell } from '@marcus/roc/react/duotone';
import { Home, Bell } from '@marcus/roc/react/sharp';

Props

Svelte

<script>
  import Home from '@marcus/roc/svelte/outline/Home.svelte';
  import Bell from '@marcus/roc/svelte/solid/Bell.svelte';
</script>
 
<Home size={24} class="icon" />
<Bell size={20} />

Import patterns

// Individual component (recommended for Svelte)
import Home from '@marcus/roc/svelte/outline/Home.svelte';
// Barrel import (works but larger bundle)
import { Home, Bell } from '@marcus/roc/svelte/outline';

Component names are PascalCase: arrow-left.svg becomes ArrowLeft.svelte.

HTML Sprite

Copy dist/sprite.svg to your public directory, then:

<svg width="24" height="24" class="text-gray-700">
  <use href="/sprite.svg#home-outline" />
</svg>

Symbol IDs: {name}-{style} (e.g., bell-solid, search-duotone, home-sharp).

Duotone Setup

Duotone icons require a CSS custom property. Add once globally:

:root {
  --color-duotone-fill: rgba(94, 106, 210, 0.15);
}

Adjust the color/opacity to match your design system. Common values:

/* Blue tint (default) */
--color-duotone-fill: rgba(94, 106, 210, 0.15);
 
/* Brand-colored */
--color-duotone-fill: rgba(var(--brand-rgb), 0.12);
 
/* Neutral */
--color-duotone-fill: rgba(0, 0, 0, 0.08);

Metadata

import metadata from '@marcus/roc/metadata';
// { icons: [...], categories: [...], total: 416 }

Use for building icon pickers, search, or documentation.

Available Icons

416 icons across 18 categories. See references/icon-catalog.md for the full list.

Categories: Navigation, Data, Communication, People, System, Brand, Actions, Files, Media, Weather, Transport, Commerce, Development, Devices, Objects, Food, Gaming, Nature

Common icons by use case:

Migration from Other Libraries

From Lucide / Heroicons / Phosphor

1. Replace the import source:

// Before (Lucide)
import { Home, Bell } from 'lucide-react';
// After (Roc)
import { Home, Bell } from '@marcus/roc/react/outline';

1. Props map directly: size, strokeWidth, className all work the same.

1. Name differences: most icon names match Lucide conventions. Check the icon catalog for exact names. Key differences:

• Kebab-case filenames: arrow-left not arrowLeft
• PascalCase components: ArrowLeft (same as Lucide)
• Brand icons use -logo suffix: github (icon), twitter-logo, discord-logo

From Font Awesome

Replace <i> tags with components:

// Before
<i className="fa-solid fa-house" />
// After
import { Home } from '@marcus/roc/react/solid';
<Home size={20} />

Svelte migration

<!-- Before (any icon lib) -->
<Icon name="home" />
 
<!-- After (Roc) -->
<script>
  import Home from '@marcus/roc/svelte/outline/Home.svelte';
</script>
<Home size={24} />

Checklist for Migration

• [ ] Install @marcus/roc
• [ ] Remove old icon package from dependencies
• [ ] Find-and-replace imports (match old names to Roc names via catalog)
• [ ] Add duotone CSS variable if using duotone style
• [ ] Verify icon rendering at target sizes (16, 20, 24)
• [ ] Check that currentColor inheritance works with your color system