whatisgithub

What is iconpark?

bytedance/iconpark — explained in plain English

Analysis updated 2026-06-24

★ 9,012TypeScriptAudience · developerComplexity · 2/5Setup · easy

In one sentence

A library of 2,000+ icons by ByteDance that supports four visual styles, outline, filled, two-tone, and multi-color, and ships as ready-to-use components for React, Vue, and plain SVG.

Mindmap

mindmap
  root((repo))
    What it does
      2000 plus icons
      Four visual styles
      Online icon browser
    Tech stack
      TypeScript
      React
      Vue
    Use cases
      Web components
      Design exports
      Style switching
    Audience
      Developers
      Designers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Add consistently styled icons to a React or Vue app by installing the package and importing icon components directly into your code.

USE CASE 2

Browse the full icon library online, adjust size and color visually, and export as SVG for use in Figma, Sketch, or Photoshop.

USE CASE 3

Switch an icon between outline, filled, two-tone, or multi-color display by changing a single property, without swapping files.

What is it built with?

TypeScriptReactVueSVG

How does it compare?

bytedance/iconparknexmoe/vidbeebloomrpc/bloomrpc
Stars9,0129,0079,003
LanguageTypeScriptTypeScriptTypeScript
Setup difficultyeasyeasymoderate
Complexity2/52/52/5
Audiencedevelopergeneraldeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min
The project is described as free to use, consult the repository for the specific license terms.

So what is it?

IconPark is a collection of over 2,000 icons created by ByteDance, the company behind TikTok. The icons are designed for use in websites and apps, and the project's main distinguishing feature is that each icon can be displayed in multiple visual styles without needing separate files for each style. A single icon source can be rendered as outline only, fully filled, two-tone, or multi-color, simply by changing a few settings. The icons are available as ready-to-use components for React, Vue 2, Vue 3, and as plain SVG strings. React and Vue are popular JavaScript frameworks used to build web interfaces. This means developers working in any of these environments can add icons to their projects by installing the relevant package and importing icon components directly into their code, then passing properties to control size, color, and style. Designers can also use the icons without writing any code. The project provides an online website where you can browse the full library, adjust styling visually, and then copy the result as an SVG file or as code for use in design tools like Figma, Sketch, or Photoshop, or in presentation software like PowerPoint. Each icon is hand-drawn on a consistent 48x48 pixel grid using SVG strokes, which gives them a clean and consistent look that scales well to any size. The project is free to use. It is maintained as a monorepo, meaning all the packages for different frameworks live together in one repository.

Copy-paste prompts

Prompt 1
Install @icon-park/react and add a two-tone heart icon to my React component with a size of 32px and primary color #FF0000.
Prompt 2
Show me how to use @icon-park/vue-next in a Vue 3 component and set the icon stroke width and color using props.
Prompt 3
I want to browse the IconPark library and download a specific icon as an SVG with the multi-color style. Walk me through the online tool workflow.
Prompt 4
Generate a React component that maps over a list of names and renders the matching IconPark icon for each one with a fallback.

Frequently asked questions

What is iconpark?

A library of 2,000+ icons by ByteDance that supports four visual styles, outline, filled, two-tone, and multi-color, and ships as ready-to-use components for React, Vue, and plain SVG.

What language is iconpark written in?

Mainly TypeScript. The stack also includes TypeScript, React, Vue.

What license does iconpark use?

The project is described as free to use, consult the repository for the specific license terms.

How hard is iconpark to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is iconpark for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.

What are similar repos?