IconPark

English | 简体中文

Introduction

IconPark gives access to more than 1,200 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.

Packages

Generate Cross-platform Components

Find packages in packages folder. NPM packages make it painless to import icon components to your project.

• React Component
• Vue Component
• Pure SVG String

Multiple themes

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:

Source file:

After Transforming:

React icons	Preview	Theme
<Camera theme="outline" size="32" fill="#000000"/>		Outline theme
<Camera theme="filled" size="32" fill="#333"/>		Filled theme
<Camera theme="two-tone" size="32" fill={['#333' ,'#2F88FF']}/>		Two-tone theme
<Camera theme="multi-color" size="32" fill={['#333' ,'#2F88FF' ,'#FFF' ,'#43CCF8']}/>		Multi-color theme

Website

Customization

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.

Convenient Online Tools

You can use them in Figma, Sketch, Photoshop, PPT, etc.

• Copy SVG
• Copy React Icon Component
• Copy Vue Icon Component
• Download PNG
• Download SVG

Feedback