Iconpark
| Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
|---|---|---|---|---|---|---|---|---|---|---|
| Coreui Free Bootstrap Admin Template | 11,655 |  | 3 | 3 | 8 days ago | 3 | May 25, 2017 | 5 | mit | HTML |
| Free Bootstrap Admin & Dashboard Template | ||||||||||
| Material Theme Jetbrains | 7,910 | 2 years ago | other | Java | ||||||
| JetBrains theme of Material Theme | ||||||||||
| Nebular | 7,865 |  | 454 | 45 | 25 days ago | 92 | March 29, 2023 | 867 | mit | TypeScript |
| :boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode | ||||||||||
| Hugo Papermod | 7,159 | 8 days ago | 90 | mit | HTML | |||||
| A fast, clean, responsive Hugo theme. | ||||||||||
| Iconpark | 6,931 | | 38 | 7 months ago | 35 | July 04, 2022 | 493 | apache-2.0 | TypeScript | |
| 🍎Transform an SVG icon into multiple themes, and generate React icons，Vue icons，svg icons | ||||||||||
| Papirus Icon Theme | 5,967 | 4 days ago | 236 | gpl-3.0 | ||||||
| Papirus icon theme for Linux | ||||||||||
| Vim Devicons | 5,325 | 2 months ago | 63 | mit | Vim Script | |||||
| Adds file type icons to Vim plugins such as: NERDTree, vim-airline, CtrlP, unite, Denite, lightline, vim-startify and many more | ||||||||||
| Whitesur Gtk Theme | 4,648 | 17 days ago | 342 | mit | SCSS | |||||
| MacOS Big Sur like theme for Gnome desktops | ||||||||||
| Vscode Icons | 4,149 | 5 days ago | 7 | December 04, 2021 | 207 | mit | TypeScript | |||
| Icons for Visual Studio Code | ||||||||||
| Flatabulous | 3,689 | 5 years ago | 51 | mit | CSS | |||||
| This is a Flat theme for Ubuntu and other Gnome based Linux Systems. | ||||||||||
IconPark
English | 简体中文
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, 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.
| Name | Github link | NPM link |
|---|---|---|
| React Icons | React Component | @icon-park/react |
| Vue2 Icons | Vue Component for old Vue2.0 | @icon-park/vue |
| Vue3 Icons | Vue Component for Vue3.0 | @icon-park/vue-next |
| SVG Icons | Pure SVG String | @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: 
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 |
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. 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
