explaingit

bytedance/iconpark

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

TLDR

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

Things people build with this

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.

Tech stack

TypeScriptReactVueSVG

Getting 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.

In plain English

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.
Open on GitHub → Explain another repo

← bytedance on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.