withicons / rules
Cursor rule3 starsChanged 28 days agoMITView on GitHub
Use the "with icons" library (@withicons/*) whenever adding or replacing icons in UI code
We split this with-icons.mdc into the rules it gives an agent
1 rule. About 0 are common, 0 are distinctive, and 1 is very specific to this project.
≈0
Common · estimate
Many files like this have a rule of this kind.
≈0
Distinctive · estimate
This author's own choices. Worth a look.
1
Very specific
Tied to their project's names, files or tools. Probably skip.
- Common
- Distinctive
- Very specific
- Very specific: line 18
Avoid the generic <Icon name=...> component unless names are dynamic, because it bundles every icon.
≈ “Common” is an estimate: at least 1 in 5 of the 6,350 Cursor rule files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.
Files
---
description: Use the "with icons" library (@withicons/*) whenever adding or replacing icons in UI code
globs: ["**/*.{tsx,jsx,ts,js,vue,svelte,html,astro,mdx}"]
alwaysApply: false
---
# Icons: use with icons (withicons.com)
Copy this file into `.cursor/rules/` of an app that uses with icons. Full skill: https://withicons.com/skill/SKILL.md
- Packages: `@withicons/react`, `vue`, `svelte`, `angular`, `solid`, `web` (custom element `<with-icon>` + icon classes), `static` (SVG + sprites), `core` (resolve/search), `motion` (optional animations).
- Imports are PascalCase of the kebab-case name: `import { ArrowRight, Trash } from '@withicons/react'`. Other styles are subpaths: `@withicons/react/solid` (also `/duo`, `/gloss`, `/engrave`, `/blueprint`, `/sketch`, `/glass`, `/kawaii`, `/sticker`, `/pixel`, `/retro`).
- **Never invent an icon name.** Aliases (`bin`, `gear`, `house`) are not exports. Look the name up with the `withicons` MCP server (`search_icons`), `npx withicons search <words>`, or `https://withicons.com/api/search?q=<words>`.
- Style: `line` for UI chrome, `solid` for active/selected states, `duo` for friendly cards. Creative styles (`gloss`, `engrave`, `blueprint`, `sketch`) and the multi-colour palette styles (`glass` glassmorphism, `kawaii` cute, `sticker` Y2K, `pixel` 8-bit, `retro` 70s) are for illustrations, heroes and slides at 32px or larger only. Use one style per UI region. Palette colours are CSS variables (`--with-<style>-<role>`); the ink follows `color`.
- Animation is optional and separate: `@withicons/motion` (with a bundler import `@withicons/motion/motion.css` + `@withicons/motion/icons.css`; from a CDN link `dist/motion.css` + one `dist/icons/<name>.css` per animated icon, never the all-icons `icons.css`; wrap the icon in `<span class="wm wm-loop" data-wm="<name>">`, `wm-hover` inside a `.wm-trigger` button, `wm-swap` for icon-to-icon). Ask the MCP `animate_icon` tool or `npx withicons animate <name>` for exact code. Keep loops to one or two per screen.
- Props: `size` (24), `color` (currentColor, so prefer CSS `color`), `strokeWidth` (line/duo/blueprint/sketch/kawaii only), `absoluteStrokeWidth`, `title`.
- Accessibility: decorative icons need nothing (aria-hidden by default). Icon-only buttons get `aria-label` on the `<button>`. Standalone meaningful icons get `title` (components) or `label` (`<with-icon>`).
- Avoid the generic `<Icon name=...>` component unless names are dynamic, because it bundles every icon. Do not use `<img>` for icons that must follow text colour. Serve sprites from the same origin.
- HTML without a build: `<script type="module" src="https://cdn.jsdelivr.net/npm/@withicons/web@0.2.0/dist/cdn.js"></script>` (loads only the icons on the page), then `<with-icon name="home" variant="solid"></with-icon>`. Icon classes: `<script src="https://cdn.jsdelivr.net/npm/@withicons/classes@0.2.0/dist/with-loader.js" defer></script>`, then `<i class="with with-home"></i>`. Never `with-all.css` in production (every icon in every style, ~6 MB gzipped).
Where files are headingNew Cursor rule files have more rules about planning and tracking tasks, and fewer about code style.
Of the Cursor rule files we read, the 3,978 first seen in the last six months, against the older ones: the kind of rule that gained most share, and the kind that lost most. About files like this in general, not this one, and an estimate, since a kind is a pattern in the words.
In this repository2 other files it gives its agents.
- AGENTS.mdAGENTS.md
- with-iconsSkill
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.