简体中文
EnglishWhat formats and developer resources are included with Griddy Icons?
Updated
Griddy Icons ships in four practical formats: individual SVG files, Figma components, a React library, and a master file with individual layers. All of them are part of the same icon family — 1,159 icons drawn on a 24 x 24px grid with a 1.5px stroke — so you can pick the format that matches your workflow rather than converting assets by hand. The whole set is MIT-licensed and open source, which means you can use it in commercial work as well as personal projects.
The four formats at a glance
| Format | What you get | Best for |
|---|---|---|
| All SVG icons | Every icon as a standalone SVG file | Static sites, design handoff, any tool that imports SVG |
| Figma components | Icons as reusable Figma components | Design systems and UI mockups inside Figma |
| React library | Icons packaged for React projects | React apps that need icons as components |
| Master file with individual layers | One source file with each icon on its own layer | Editing, restyling, or exporting custom variants |
SVG icons
The SVG set covers the full library — the page lists 1,159 icons, from Activity and Address Book through to categories like arrows, batteries, and alerts. Because they're plain SVG, you can drop them into HTML, import them into a design tool, or run them through a build step. The consistent 24 x 24px canvas and 1.5px stroke mean icons line up visually without per-icon tweaking.
Figma components
If your team designs in Figma, the components let you place icons as instances instead of pasting raw vectors. That keeps a single source of truth: update the component and every instance follows. This is the format to choose when icons need to stay in sync with a design system.
React library
For React codebases, the library gives you icons as components rather than files you import one by one. This fits projects that already use a component-based setup and want icons to behave like the rest of the UI — props, sizing, and styling handled in code.
Master file with individual layers
The master file keeps every icon on its own layer. That's the format for anyone who needs to modify icons — adjust stroke weight, combine shapes, or export a custom subset — without hunting through separate files.
Free download vs. the $9 download
The site presents the icon family as free and open source under the MIT license, and also lists a Download for $9 option. The page evidence shows the paid link but does not break down exactly what the $9 unlocks beyond the free assets, so treat the paid tier as a way to support the project or get the packaged bundle rather than as a gate on the formats listed above. If you only need SVGs, Figma components, or the React library for a project, start with the free route and confirm what the paid download adds before paying.
How to choose
- Static site or mixed tooling: take the SVG set.
- Design-first team: use the Figma components.
- React app: use the React library.
- Custom or restyled icons: start from the master file with individual layers.
One caveat worth checking yourself: the page shows version 0.2.0, so the library is early-stage. Verify that the specific icons you need are present in the current set before committing to it for a large project.