gitmyhub

IconPark

TypeScript ★ 9.0k updated 3y ago ▣ archived

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

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.

TypeScriptReactVueSVGsetup: easycomplexity 2/5

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.

Where it fits