What is lucide-react-overview-and-setup?

A setup guide for using Lucide, a collection of SVG interface icons, in React applications through the lucide-react package.

Installing Lucide, importing icons as React components, setting their size and appearance, and choosing between direct, dynamic, or laboratory icons.

It helps choose the correct import style and basic icon settings before handling more specialized icon or accessibility needs.

lucide-react-overview-and-setup — Skill by andrewsrigom/agent-skills

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add andrewsrigom/agent-skills --skill lucide-react-overview-and-setup

Clone the repo

git clone --depth 1 https://github.com/andrewsrigom/agent-skills

Made for: Claude Code, Codex.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

README.md

[![agentmods](https://agentmods.dev/badge/skills/andrewsrigom/agent-skills/lucide-react-overview-and-setup/github.svg)](https://agentmods.dev/skills/andrewsrigom/agent-skills/lucide-react-overview-and-setup)

Your own site

<a href="https://agentmods.dev/skills/andrewsrigom/agent-skills/lucide-react-overview-and-setup"><img src="https://agentmods.dev/badge/skills/andrewsrigom/agent-skills/lucide-react-overview-and-setup/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

Your own site · 80×15

<a href="https://agentmods.dev/skills/andrewsrigom/agent-skills/lucide-react-overview-and-setup"><img src="https://agentmods.dev/badge/skills/andrewsrigom/agent-skills/lucide-react-overview-and-setup.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 92 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 930 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5.1	$0.00092	$0.00930
Opus 5.5	$0.00037	$0.00372
Sonnet 5.5	$0.00018	$0.00186
Haiku 4.5	$0.00009	$0.00093

Measured 2mo ago against content hash c837aef2fdbe, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

lucide-react-overview-and-setup scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 2mo ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

lucide-react/lucide-react-overview-and-setup/SKILL.md · 90 lines

How it starts

The opening of the file, as written. The whole thing — 90 lines — stays where its author put it; the contents beside it link to each section on GitHub.

Lucide React Overview And Setup

Use this skill for first-time Lucide setup and for choosing the right Lucide React path before going deeper.

Scope

installing lucide-react
importing Lucide icons as React components
core props like size, color, strokeWidth, and absoluteStrokeWidth
import naming patterns such as House, HouseIcon, and LucideHouse
deciding when work belongs to styling and accessibility vs dynamic icons and Lucide Lab

Routing cues

install Lucide, replace an icon library with Lucide, import icons in React, icon component props, Lucide aliases, absoluteStrokeWidth, tree-shaking -> use this skill
global icon defaults, CSS styling, LucideProvider, icon-only button accessibility, title, aria-label, or screen-reader behavior -> use lucide-react-styling-and-accessibility
DynamicIcon, icon names from CMS or database, lucide-react/dynamic, @lucide/lab, custom iconNode, or non-core icons -> use lucide-react-dynamic-icons-and-lucide-lab

Default path

Read references/react-basics-and-setup.md first.
Install only lucide-react for standard React usage.
Prefer direct named imports from lucide-react so bundlers only include used icons.
Use icon props for local adjustments and route out if the task is really about app-wide defaults, accessibility, or dynamic loading.
If the task wants icons by name or icons outside the core set, move to the dynamic and Lab skill instead of stretching base imports too far.

When to deviate

Use import alias styles only when the codebase needs stricter naming consistency or collision avoidance.
Reach for @lucide/lab only when the icon is outside the core set or a custom icon node is required.
Move to dynamic loading only when icon names truly come from runtime data.

Guardrails

Prefer direct named imports over generic dynamic loading for normal app code.
Treat Lucide icons as React components, not raw data objects.
Keep icon choice explicit in code when the icon set is static.
Use the default import surface unless the task specifically needs prefixed or suffixed aliases.
absoluteStrokeWidth is for preserving stroke appearance while resizing, not a substitute for all styling decisions.

Read the full file on GitHub · 90 lines

Files

What ships with it

1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

references/react-basics-and-setup.md 1.9 KB

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

2mo ago First seen · 90 lines · 92 tokens per session scan A c837aef2fdbe

Subscribe to this mod's changes

lucide-react-overview-and-setup is a skill published in the GitHub repository andrewsrigom/agent-skills (2 stars, last pushed 7mo ago), licensed MIT. It adds 92 tokens to every session and 930 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Design and UX Frontend React

lucide-react-overview-and-setup next to 6 skills from other repositories
Mod	Type	Stars	Last push	Licence	Scan	Tokens	Works with
lucide-react-overview-and-setupandrewsrigom/agent-skills	Skill	2	7mo ago	MIT	A	92	Claude Code, Codex
chakra-ui-builderchakra-ui/chakra-ui	Skill	41k	2d ago	MIT	A	214	Claude Code, Codex
tamagui-v6-configtamagui/tamagui	Skill	14k	yesterday	MIT	A	0	Claude Code, Codex
tamagui-theme-generatortamagui/tamagui	Skill	14k	yesterday	MIT	A	48	Claude Code, Codex
frontend-ui-dark-tsmicrosoft/skills	Skill	3.2k	yesterday	MIT	A	48	Claude Code
cobejsMengTo/Skills	Skill	7.3k	2d ago	MIT	A	31	Claude Code, Codex
vercel-composition-patternscalesthio/OpenMontage	Skill	78k	4d ago	AGPL-3.0	A	58	Claude Code, Codex