https://github.com/bytedance/IconPark

🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons
https://github.com/bytedance/IconPark

fill icon icon-components icons multiple-themes stroke svg svg-icon vue-component vue-next vue3

Last synced: about 1 month ago
JSON representation

🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons

• Host: GitHub
• URL: https://github.com/bytedance/IconPark
• Owner: bytedance
• License: apache-2.0
• Created: 2020-07-27T07:42:16.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-02-24T07:46:02.000Z (about 2 years ago)
• Last Synced: 2025-03-13T07:41:39.396Z (about 1 month ago)
• Topics: fill, icon, icon-components, icons, multiple-themes, stroke, svg, svg-icon, vue-component, vue-next, vue3
• Language: TypeScript
• Homepage: http://iconpark.bytedance.com/
• Size: 12.3 MB
• Stars: 8,562
• Watchers: 57
• Forks: 510
• Open Issues: 738
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.en-US.md
  • License: LICENSE

Awesome Lists containing this project

• my-awesome-list - IconPark
• awesome-icons - IconPark - IconPark gives access to more than 1,400 high-quality icons, and introduces an interface for customizing your icons. ([Website](https://iconpark.bytedance.com)) (General)
• awesome-github-star - IconPark

README

        
# [IconPark](http://iconpark.bytedance.com/official)



  

    

  



English | [简体中文](README.zh-CN.md)

## Introduction

IconPark gives access to more than 2000 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`](./packages/react/README.md), [`vue-icons`](./packages/vue/README.md) and [`svg-icons`](./packages/vue/README.md).

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.

| Name | Github link | NPM link |

| ------- | --- | --- |

| React Icons | [React Component](./packages/react/README.md)  | [@icon-park/react](https://www.npmjs.com/package/@icon-park/react) |

| Vue2 Icons | [Vue Component for old Vue2.0](./packages/vue/README.md) | [@icon-park/vue](https://www.npmjs.com/package/@icon-park/vue) |

| Vue3 Icons | [Vue Component for Vue3.0](./packages/vue-next/README.md) | [@icon-park/vue-next](https://www.npmjs.com/package/@icon-park/vue-next) |

| SVG Icons | [Pure SVG String](./packages/svg/README.md)| [@icon-park/svg](https://www.npmjs.com/package/@icon-park/svg) |

#### 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: ![](https://sf1-dycdn-tos.pstatp.com/obj/eden-cn/lswwheh7nupwnuhog/icons/camera.svg)

After Transforming:

| React icons | Preview | Theme |

| ---- | --- | --- |

| `````` |  | Outline theme |

| `````` |  | Filled theme |

| `````` |  | Two-tone theme |

| `````` |  | Multi-color theme |

#### Embed IconPark in your project 

If you need to use additional information such as icon name, author, category, label and creation time, you can use the `icons.json` file located in the root directory of each NPM.

### Website

#### Customization

Here is the website of [IconPark](http://iconpark.bytedance.com/official). 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

    

   

### Changelog

[CHANGELOG.en-US](CHANGELOG.en-US.md) | [CHANGELOG.简体中文](CHANGELOG.zh-CN.md)