What IconPark Solid is
IconPark Solid is the filled counterpart to ByteDance's IconPark Outline, with 1,970 solid-style icons on the same 24×24 grid and the same component API. Both sets are themeable at runtime and support multi-colour configuration.
Filled icons carry more visual weight than outlines, which makes them the standard choice for active navigation items, selected filters, and primary calls to action. Pairing Solid for active state with Outline for default state is the intended usage pattern across the two IconPark sets.
IconStash indexes the complete IconPark Solid collection. You can search it alongside 27 other libraries, preview any icon at any size and colour, and export SVG, PNG, React JSX, Vue, CSS, or an SVG sprite without installing a package or creating an account.
React
npm install @icon-park/react
The official package ships each icon as a tree-shakeable component, so bundlers only include the icons you actually import. Open any IconPark Solid icon on IconStash and the Code tab shows that icon's exact import statement and JSX.
Plain SVG and other frameworks
You do not have to install anything. Every IconPark Solid page lets you copy the raw SVG markup and paste it inline, which avoids a dependency entirely and gives you full control over colour, size, and stroke width.
IconStash also exports PNG at six sizes, Vue and CSS snippets, and SVG sprites — all generated in the browser from the original vector.
Good fit
Active and selected states in navigation, filters, and tab bars — particularly in products already using IconPark Outline for default state.
Consider alternatives
For a much larger filled set, Material Design Icons ships a full Filled theme and Simple Icons is entirely solid. For filled icons with more style range, compare Phosphor.
Licensing
Apache 2.0 with an express patent grant. Free for commercial use without attribution.
What is IconPark Solid?
IconPark Solid is the filled counterpart to ByteDance's IconPark Outline, with 1,970 solid-style icons on the same 24×24 grid and the same component API. Both sets are themeable at runtime and support multi-colour configuration.
Is IconPark Solid free for commercial use?
Yes. IconPark Solid is released under Apache 2.0, which permits commercial use, modification, and distribution and includes an express patent grant from the licensor. Attribution is not required for ordinary use, but you should not use the icons in a way that implies the licensor endorses your product.
How do I use IconPark Solid icons in React?
Install the package with npm install @icon-park/react, then import icons as components. Every IconPark Solid page on IconStash shows the exact import statement and usage snippet for that specific icon in the Code tab, so you can copy working code without checking the docs. Tree-shakeable packages mean your bundler only includes the icons you actually import.
Can I download IconPark Solid icons as PNG?
Yes. Open any IconPark Solid icon on IconStash and use the Download PNG button to export at 16, 32, 64, 128, 256, or 512 pixels. The PNG is generated client-side from the original vector, so it stays crisp at every size. You can also copy the raw SVG markup, export a React component, or build an SVG sprite without installing anything.
When should I use filled icons instead of outline?
For active navigation, selected filters, current tab indicators, and primary actions — anywhere you need the icon to read as engaged rather than available. Filled icons occupy more visual weight, so using them everywhere tends to make an interface feel heavy. Outline for default, filled for active is the usual pattern.
Can I mix IconPark Solid and IconPark Outline?
Yes, and it is the intended pattern. Both sets share the same 24×24 grid, component API, and theming system, so an outline icon and its solid counterpart have matching optical bounds and will not shift your layout when the state changes.