🎨 icons-pro-max

A Portable Icon System for AI Agents

One portable catalog — payment marks, QR guidance, social/app brand icons, the lucide UI set, 144 tech-stack logos, 86 full-color AI provider marks, and 516 Claude connector icons. Bundled assets, rendering recipes, sources, and an anti-slop checklist.

CI GitHub Release npm License: MIT Agent Skills Claude Code Works with

Latest release · CI · npm package

Available on npm and GitHub Releases.

Release notifications

To receive new release notifications, open this repository, select Watch → Custom → Releases, then click Apply. Choose GitHub or email delivery in your notification settings.

Starring the repository or downloading/installing a package does not subscribe you to release notifications. Notifications do not update your installed copy; follow the installation instructions to update.

View release notes.

Why

Icons are where AI-generated UI leaks: a re-traced logo that's almost right, a brand mark recolored to match a theme, a payment logo stretched out of ratio, a generic credit-card glyph standing in for Visa, or the same ZaloIcon copy-pasted into four files until they drift apart.

icons-pro-max is the single source of truth for every icon the site ships. Find the icon here first, reuse its canonical component / asset path / size, and never redraw or recolor a brand mark. The one rule:

An icon carries a brand's identity. Reproduce it exactly. Generic UI glyphs (lucide) are the only icons you may freely restyle.

Install

ChatGPT Agent Plugin

The release asset icons-pro-max-X.Y.Z-plugin.zip contains the portable plugin.json at its root, the skill, all bundled assets, listing artwork, and third-party notices. Check it against the release's SHA256SUMS before uploading. For author testing, open Plugins → Upload new or existing plugin using the intended publisher account and upload this ZIP as a skills-only package.

This prepares a draft; public directory availability still requires a verified developer identity, review, and publication through the OpenAI submission portal. The GitHub release is not a public directory listing. No Sites hosting, MCP server, or account connection is required by this skill-only package.

In Codex or the ChatGPT desktop app, the repository marketplace below provides local installation. Bundled asset paths are relative to the skill directory; application paths in the catalog are examples to adapt to the current project.

GitHub Packages

A repository-linked copy is available as @buidangminh23/icons-pro-max on GitHub Packages. The npmjs.com package remains @minhspark/icons-pro-max. GitHub's npm registry requires authentication with a classic token with read:packages even for public packages. Authenticate locally, never commit a token:

npm login --scope=@buidangminh23 --registry=https://npm.pkg.github.com --auth-type=legacy
npm install @buidangminh23/icons-pro-max --registry=https://npm.pkg.github.com

This downloads the bundle; use the agent-specific instructions below to register it.

npm package

npm install @minhspark/icons-pro-max

This downloads the bundle to node_modules/@minhspark/icons-pro-max. It does not register the skill with an agent automatically; use the agent installers below or copy the bundled skill and assets to the appropriate agent directory.

Download a complete, versioned bundle from GitHub Releases: ZIP or TAR.GZ, including the catalog, all assets, and plugin manifests. Verify it against the attached SHA256SUMS before extracting. The general release archives have a single icons-pro-max-X.Y.Z/ root; preserve its hidden manifest directories when copying. See release and verification instructions. The separate -plugin.zip uses an unprefixed root for the submission portal.

Pick your tool. Every block has a copy button (hover its top-right corner).

`npx` · skills

npx skills add buidangminh23/icons-pro-max

`npx` · add-skill

npx add-skill buidangminh23/icons-pro-max

Claude Code · native plugin (run inside Claude Code)

/plugin marketplace add buidangminh23/icons-pro-max
/plugin install icons-pro-max@icons-pro-max

Cursor

npx skills add buidangminh23/icons-pro-max -a cursor

Codex · native marketplace

codex plugin marketplace add buidangminh23/icons-pro-max

Gemini CLI · native extension

gemini extensions install https://github.com/buidangminh23/icons-pro-max

Git submodule · vendor it into a repo (how the Personal Web wires it)

git submodule add https://github.com/buidangminh23/icons-pro-max.git .agents/skills/icons-pro-max
git commit -m "chore: add icons-pro-max skill submodule"

Works with: Claude Code · Cursor · Codex · Gemini CLI. Skill name once loaded: icons-pro-max → then prompt "Use the icons-pro-max skill."

More options — global flags, other agents (Cline, opencode…), manual install

The skills CLI targets any agent with -a and installs to the user directory with -g:

Tool	Command
Claude Code	`npx skills add buidangminh23/icons-pro-max -a claude-code -g`
Codex	`npx skills add buidangminh23/icons-pro-max -a codex -g`
Cursor	`npx skills add buidangminh23/icons-pro-max -a cursor -g`
Cline	`npx skills add buidangminh23/icons-pro-max -a cline -g`
opencode	`npx skills add buidangminh23/icons-pro-max -a opencode -g`
Several at once	`npx skills add buidangminh23/icons-pro-max -a claude-code -a cursor -a codex`

Drop -g for a project-local install. Manage with npx skills list, npx skills update, npx skills remove.

Manual (portable) — fetch the catalog once, then place it where your agent looks:

curl -fsSL https://raw.githubusercontent.com/buidangminh23/icons-pro-max/main/skills/icons-pro-max/SKILL.md -o SKILL.md

Clone the whole skill (catalog + bundled SVG/PNG assets):

git clone https://github.com/buidangminh23/icons-pro-max.git

Tool	Where it goes
Claude Code	`~/.claude/skills/icons-pro-max/SKILL.md` (global) or `.claude/skills/…` (project)
Codex	save in repo, then reference from `AGENTS.md`
Cursor	rename to `.cursor/rules/icons-pro-max.mdc`
Cline / opencode / others	drop into the agent's skills/rules folder, or paste `SKILL.md` as context

The complete icon catalog

Seven galleries below — QR is recipe-only (SKILL.md §2) and bundles no marks. Every payment, social, tech, badge, AI, and connector mark shown is a real asset bundled in this repo (skills/icons-pro-max/assets/), and SOURCES.md records where each one comes from (devicon, Simple Icons, LobeHub Icons, or the brand's own file — never a redraw). The UI set comes from the lucide-react package. Each group is documented in SKILL.md with its path, component, size, brand color, and render recipe.

💳 Payment methods — 6 marks

Components: VietQRLogo · VnpayLogo · ZaloPayLogo · MoMoLogo · VisaLogo · MastercardLogo — all via the shared white badge wrapper in PaymentLogos.tsx, each at a tuned height (11–18px).

More payment marks — bundled on padded white chips, not yet wired into PaymentLogos.tsx:

🔗 Social & app brand icons — 28

In the web, GitHub/LinkedIn/Facebook/Telegram render as currentColor inline SVGs; Zalo and Gmail keep brand colors. Those six live in src/SocialIcons.tsx — import them, never re-inline. The other 22 are bundled marks ready for a new component. (Bundled files carry the brand fill on a white tile for standalone display.)

🧰 Tech-stack logos — 144

📱 Download & store badges — 8

Vietnamese and English variants: Apple and Google publish their own localized badges; the macOS and Windows badges are house-built (macos.svg/windows.svg read Tải cho, macos-en.svg/windows-en.svg read Download for).

🤖 AI providers — 86

Full-color marks from LobeHub Icons (the -color variant wherever the brand has one). Monochrome brands ship black on a white tile.

🔌 Claude connectors — 516

The services in the Claude connector directory — Google Drive, Gmail, Google Calendar, Canva, Microsoft 365, Notion, Figma, Slack, and the rest.

Show all 516 connector icons

Vector marks where the brand has one (matched by official domain, not by name), otherwise the icon the connector directory serves. See SOURCES.md.

🎛️ UI icons — lucide-react (68 in use)

Generic action/status glyphs — the only freely-restylable icons (currentColor, sized by class). They come from the lucide-react package, so the skill bundles no files for them. The previews below are the official lucide-static SVGs, each tinted with an accent color that hints at its meaning (mid-tone shades that read in light and dark mode); in the web they inherit the text color. Reuse one before importing a new name:

Preview files live in docs/lucide/ (ISC license, © Lucide Icons and Contributors) and are not part of the skill or the npm package.

What's inside the skill

SKILL.md — 11 sections:

§0 Pick the right group — brand → its exact logo; concept → a lucide glyph.
§1 Payment — the badge wrapper, per-logo heights, aspect-ratio rules, extra bundled marks.
§2 QR — the dynamic VietQR qrUrl() recipe.
§3 Social & app — currentColor vs brand-color marks, single-source rule, 22 bundled-only marks.
§4 UI (lucide) — usage, the full in-use icon set, a11y.
§5 Tech logos — 144 official brand-colored SVGs, no recoloring.
§6 Download badges — 8 badges, Vietnamese and English.
§7 AI providers — 86 full-color marks, provider vs product rules.
§8 Claude connectors — 516 icons and the domain-verified selection order.
§9 Anti-slop checklist — 10 tells (re-drawn logo, look-alike stand-in, recolored mark, distorted ratio, wrong-meaning glyph, re-inlined duplicate…) each with the fix.
§10 Add-an-icon procedure — classify → drop asset → record its source → wire render → update catalog → a11y → verify.

All bundled marks are mirrored, self-contained, under skills/icons-pro-max/assets/ so the catalog works outside the web repo.

License

MIT for the skill text and structure. Bundled third-party brand marks under assets/ remain the property of their respective owners and must not be modified, recolored, or redrawn — see LICENSE.

MIT Licensed · Built by buidangminh23

Reuse the mark. Never redraw it.