What are Struq Icons?
Struq Icons is a free, MIT-licensed set of 182 icons, and the set the Struq skill uses by default. Every icon has two tones: a base for the shape and an accent for the part that carries the meaning. 118 of them make one small move on hover. They are drawn at the size and weight of Lucide, so they drop in where Lucide was.
Updated
Struq skill 0.5.0
Which icons are in the set?
All 182 are below, live. Hover one to see its move, change the size, the stroke and the accent for the whole set, and click an icon to copy its import.
Size
Accent
182 of 182 icons
Hover an icon to see it move. Click one to copy its import.
How do I install Struq Icons?
Copy the prompt and paste it into your agent. It installs the package, imports the two stylesheets once and swaps the icons your project uses now.
Install Struq Icons in this project with: npm install @struq/icons Import @struq/icons/tokens.css and @struq/icons/icons.css once in the root layout. Use the icons as named exports from @struq/icons, and replace the icons this project uses now.
By hand it is one command, npm install @struq/icons, and React 18 or newer. With the Struq skill installed you do nothing: every build uses the set already.
Which forms does it ship in?
Six, from one source. Pick the one that fits the work.
React
Named exports, tree-shakeable, and they render as Server Components. Props for size, stroke width, colours and motion.
CSS only
Two stylesheets carry the colours and every hover motion, for any page that has the SVGs.
Sprite
One sprite file for plain HTML, without React.
Plain SVG
Every icon as its own file, for documents, wikis and mail.
Figma
The set as a Figma library, for designers who draw before they build.
Iconify
The set is on Iconify under the prefix struq, for Vue, Svelte and the rest.
How do the two tones follow my theme?
Through two CSS variables. The shape takes the text colour, the accent takes your brand colour, and both change with your dark mode.
Set them on any parent to recolour a whole area at once. Without the token stylesheet every part falls back to the text colour, so an icon is never the wrong colour, only a quieter one. The motion runs on hover only: never on load, never in a loop, and not at all for a visitor who asked for less motion.
Icons are the start. Get the skill.
Paste it into Claude Code. It runs the install, then /struq is ready.
The Struq skill is free and open source. No account, no key, nothing to configure. Version 0.5.0, and you update by running it again.