English | 简体中文
IconPark gives access to more than 1,400 high-quality icons, and introduces an interface for customizing your icons.
Instead of using various SVG source files to achieve different themes, We implement a technology transforming attributes of a single SVG source file into multiple themes. Besides, we provide cross-platform components, including react-icons
, vue-icons
and svg-icons
.
So whether you are a designer or a developer, you can use them in your designs or your projects for free.
Find packages in
packages
folder. NPM packages make it painless to import icon components to your project.
Basic coloring can be done by setting two attributes on the node: fill and stroke. Fill sets the color inside the object while stroke sets the color of the line drawn around the object. By changing this two attributes, you can transform a single SVG icon into different themes, including: outline
, filled
, two-tone
, multi-color
. Take the icon named camera
for example:
After Transforming:
Here is the website of IconPark. Each icon is hand-coded within a 48x48 grid, using SVG stroke giving the maximum flexibility on styling. You can adjust the color, size,
stroke-width
,stroke-linejoin
,stroke-linecap
and other attributes to meet your needs.
You can use them in Figma, Sketch, Photoshop, PPT, etc.
- Copy SVG
- Copy React Icon Component
- Copy Vue Icon Component
- Download PNG
- Download SVG
- 2020.12.15 publish v1.1.2, add 150+ icons
- 2020.11.26 publish v1.1.1, add new icons
- 2020.11.13 publish v1.0.14
- 2020.11.05 publish v1.0.13
- 2020.10.29 add new category
Sport
, update icons - 2020.9.30 support vue3.0, vue-next icons