[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3139":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":39,"readmeContent":40,"aiSummary":41,"trendingCount":16,"starSnapshotCount":16,"syncStatus":42,"lastSyncTime":43,"discoverSource":44},3139,"tabler-icons","tabler\u002Ftabler-icons","tabler","A set of over 6000 free MIT-licensed high-quality SVG icons for you to use in your web projects.","https:\u002F\u002Ftabler.io\u002Ficons",null,"JavaScript",20891,1146,106,104,0,13,45,199,49,119.18,"MIT License",false,"main",[26,27,28,29,30,31,32,33,34,35,36,37,38,5],"bootstrap-icons","components","css","icon","icon-pack","icons","icons-pack","iconset","quality-svg-icons","react","svelte","svg","svg-icons","2026-06-12 04:00:16","# Tabler Icons\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Ftabler.io\u002Ficons?ref=tabler-icons-readme\">\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmain\u002F.github\u002Fpackages\u002Fog-core.png\" alt=\"Tabler Icons\" width=\"838\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n    A set of \u003C!--icons-count-->6128\u003C!--\u002Ficons-count--> free MIT-licensed high-quality SVG icons for you to use in your web projects. Each icon is designed on a 24x24 grid and a 2px stroke.\n\u003Cp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Ftabler.io\u002Ficons\">\u003Cstrong>Browse at tabler.io\u002Ficons →\u003C\u002Fstrong>\u003C\u002Fa>\n\u003C\u002Fp>\n\n\n## Sponsors\n\n**If you want to support our project and help me grow it, you can [become a sponsor on GitHub](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fcodecalm) or just [donate on PayPal](https:\u002F\u002Fpaypal.me\u002Fcodecalm) :)**\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fcodecalm\">\n  \u003Cimg src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fgh\u002Ftabler\u002Fsponsors@latest\u002Fsponsors.svg\" alt=\"Tabler sponsors\">\n\u003C\u002Fa>\n\n## Testing\n\n\u003Cp align=\"center\">Browser testing via:\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fwww.testmuai.com\u002F?utm_medium=sponsor&utm_source=tabler\" target=\"_blank\">\n    \u003Cpicture>\n      \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002Ff0967860-31ad-4078-850b-40b0abc95582\" \u002F>\n      \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F55ac290a-6729-44aa-bbc3-4c5e909facbf\" \u002F>\n      \u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F86bcbe29-eb8d-4273-a381-5ce17d4ca92d\" alt=\"TestMu AI\" width=\"296\">\n    \u003C\u002Fpicture>\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n## Preview\n\n### Outline version (\u003C!--icons-count-outline-->5075\u003C!--\u002Ficons-count-outline--> icons)\n\n\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmaster\u002F.github\u002Fpreview\u002Ficons-outline-dark.png\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmaster\u002F.github\u002Fpreview\u002Ficons-outline.png\">\n    \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmaster\u002F.github\u002Fpreview\u002Ficons-outline.png\" alt=\"Tabler Icons preview\" width=\"838\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n### Filled version (\u003C!--icons-count-filled-->1053\u003C!--\u002Ficons-count-filled--> icons)\n\n\u003Cp align=\"center\">\n  \u003Cpicture>\n    \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmaster\u002F.github\u002Fpreview\u002Ficons-filled-dark.png\">\n    \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmaster\u002F.github\u002Fpreview\u002Ficons-filled.png\">\n    \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmaster\u002F.github\u002Fpreview\u002Ficons-filled.png\" alt=\"Tabler Icons preview\" width=\"838\">\n  \u003C\u002Fpicture>\n\u003C\u002Fp>\n\n\n## Installation\n\n```\nnpm install @tabler\u002Ficons --save\n```\n\nor just [download from GitHub](https:\u002F\u002Fgithub.com\u002Ftabler\u002Ftabler-icons\u002Freleases).\n\n## Usage\n\nAll icons are built with SVG, so you can place them as `\u003Cimg>`, `background-image` and inline in HTML code.\n\n### HTML image\n\nIf you load an icon as an image, you can modify its size using CSS.\n\n```html\n\u003Cimg src=\"path\u002Fto\u002Ficon.svg\" alt=\"icon title\" \u002F>\n```\n\n### Inline HTML\n\nYou can paste the content of the icon file into your HTML code to display it on the page.\n\n```html\n\u003Ca href=\"\">\n  \u003Csvg\n    xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\"\n    class=\"icon icon-tabler icon-tabler-disabled\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    stroke-width=\"1.25\"\n    stroke=\"currentColor\"\n    fill=\"none\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n  >\n    ...\n  \u003C\u002Fsvg>\n  Click me\n\u003C\u002Fa>\n```\n\nThanks to that, you can change the size, color and the `stroke-width` of the icons with CSS code.\n\n```css\n.icon-tabler {\n  color: red;\n  width: 32px;\n  height: 32px;\n  stroke-width: 1.25;\n}\n```\n\n### SVG sprite\n\nAdd an icon to be displayed on your page with the following markup (`activity` in the above example can be replaced with any valid icon name):\n\n```html\n\u003Csvg width=\"24\" height=\"24\">\n  \u003Cuse xlink:href=\"path\u002Fto\u002Ftabler-sprite.svg#tabler-activity\" \u002F>\n\u003C\u002Fsvg>\n```\n\n### React\n\nReact components available through [`@tabler\u002Ficons-react`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tabler\u002Ficons-react) package.\n\n```jsx\nimport { IconAward } from '@tabler\u002Ficons-react';\n\nconst MyComponent = () => {\n  return \u003CIconAward\n    size={36} \u002F\u002F set custom `width` and `height`\n    color=\"red\" \u002F\u002F set `stroke` color\n    stroke={3}  \u002F\u002F set `stroke-width`\n    strokeLinejoin=\"miter\" \u002F\u002F override other SVG props\n  \u002F>\n}\n```\n\n`@tabler\u002Ficons-react` exports its own type declarations for usage with React and Typescript.\n\nFor more details, see the [documentation](https:\u002F\u002Fgithub.com\u002Ftabler\u002Ftabler-icons\u002Ftree\u002Fmaster\u002Fpackages\u002Ficons-react).\n\n### Vue\n\nVue components available through [`@tabler\u002Ficons-vue`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tabler\u002Ficons-vue) package.\n\n```vue\n\u003Ctemplate>\n  \u003C!-- basic usage -->\n  \u003CIconHome \u002F>\n\n  \u003C!-- set `stroke` color -->\n  \u003CIconHome color=\"red\"\u002F>\n  \u003CIconHome stroke=\"red\"\u002F>\n\n  \u003C!-- set custom `width` and `height` -->\n  \u003CIconHome size=\"36\"\u002F>\n\n  \u003C!-- set `stroke-width` -->\n  \u003CIconHome strokeWidth=\"2\"\u002F>\n  \u003CIconHome stroke-width=\"2\"\u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\u002F\u002F Returns Vue component\nimport { IconHome } from '@tabler\u002Ficons-vue';\n\nexport default {\n  components: { IconHome }\n};\n\u003C\u002Fscript>\n```\n\nor with `\u003Cscript setup>`\n\n```vue\n\u003Cscript setup>\n\u002F\u002F Import Vue component\nimport { IconHome } from '@tabler\u002Ficons-vue';\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CIconHome color=\"red\" size=\"36\" strokeWidth=\"2\"\u002F>\n\u003C\u002Ftemplate>\n```\n\nFor more details, see the [documentation](https:\u002F\u002Fgithub.com\u002Ftabler\u002Ftabler-icons\u002Ftree\u002Fmaster\u002Fpackages\u002Ficons-vue).\n\n\n### Angular\n\nAngular components available through [`angular-tabler-icons`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fangular-tabler-icons) package.\nInstall the package, then create icons module:\n\n```ts\nimport { NgModule } from '@angular\u002Fcore';\n\nimport { TablerIconsModule } from 'angular-tabler-icons';\nimport { IconCamera, IconHeart, IconBrandGithub } from 'angular-tabler-icons\u002Ficons';\n\n\u002F\u002F Select some icons (use an object, not an array)\nconst icons = {\n  IconCamera,\n  IconHeart,\n  IconBrandGithub\n};\n\n@NgModule({\n  imports: [\n    TablerIconsModule.pick(icons)\n  ],\n  exports: [\n    TablerIconsModule\n  ]\n})\nexport class IconsModule { }\n```\n\nAfter importing the _IconsModule_ in your feature or shared module, use the icons as follows:\n\n```html\n\u003Ci-tabler name=\"camera\">\u003C\u002Fi-tabler>\n\u003Ci-tabler name=\"heart\" style=\"color: red;\">\u003C\u002Fi-tabler>\n\u003Ci-tabler name=\"brand-github\" class=\"someclass\">\u003C\u002Fi-tabler>\n```\n\n`angular-tabler-icons` exports its own type declarations for usage with Typescript.\n\nFor more usage documentation refer to [the official documentation](https:\u002F\u002Fgithub.com\u002Fpierreavn\u002Fangular-tabler-icons).\n\n### Svelte 4 and below\n\nSvelte components available through [`@tabler\u002Ficons-svelte`](https:\u002F\u002Fgithub.com\u002Ftabler\u002Ftabler-icons\u002Ftree\u002Fmaster\u002Fpackages\u002Ficons-svelte) package.\n\n```js\n\u003Cscript lang=\"ts\">\n  import { IconHeart } from '@tabler\u002Ficons-svelte';\n\u003C\u002Fscript>\n\n\u003Cmain>\n  \u003CIconHeart size={48} stroke={1} \u002F>\n  \u003CIconHeart size=\"32\" stroke=\"1.5\" \u002F>\n  \u003CIconHeart color=\"crimson\" class=\"p-1\" size=\"96\" stroke=\"2\" \u002F>\n\u003C\u002Fmain>\n```\n\n### Svelte 5\nSvelte 5 components available through [`@tabler\u002Ficons-svelte-runes`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@tabler\u002Ficons-svelte-runes) package.\n\n```js\n\u003Cscript lang=\"ts\">\n  import { IconHeart } from '@tabler\u002Ficons-svelte-runes';\n\u003C\u002Fscript>\n\n\u003Cmain>\n  \u003CIconHeart size={48} stroke={1} \u002F>\n  \u003CIconHeart size=\"32\" stroke={1.5} \u002F>\n  \u003CIconHeart color=\"crimson\" class=\"p-1\" size=\"96\" stroke=\"2\" \u002F>\n\u003C\u002Fmain>\n```\n\n## CDN\n\nAll files included in `@tabler\u002Ficons` npm package are available over a CDN.\n\n#### React icons\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tabler\u002Ficons@latest\u002Ficons-react\u002Fdist\u002Findex.umd.min.js\">\u003C\u002Fscript>\n```\n\n#### Iconfont\n\n```html\n\u003Clink rel=\"stylesheet\" href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tabler\u002Ficons-webfont@latest\u002Ftabler-icons.min.css\">\n```\n\nTo load a specific version replace `latest` with the desired version number.\n\n```html\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@tabler\u002Ficons@1.74.0\u002Ficons-react\u002Fdist\u002Findex.umd.min.js\">\u003C\u002Fscript>\n```\n\n###### HTML\n```html\n\u003Ci class=\"ti ti-brand-tabler\">\u003C\u002Fi>\n```\n\n###### CSS\n```css\ncontent: 'ec8f';\n```\n\n\n### Compiling fonts\n\nTo compile fonts first install [fontforge](https:\u002F\u002Ffontforge.org\u002Fen-US\u002F).\n\nWhen compiling the font it will look for a json file `compile-options.json` in root folder (same folder as the `package.json`) In this file you can define extra options:\n\nThe default settings if you have not defined the file will be:\n```JSON\n{\n  \"includeIcons\": [],\n  \"fontForge\": \"fontforge\",\n  \"strokeWidth\": null\n}\n```\n\nThe fontforge executable needs to be in the path or you can set the path to the downloaded fontforge executable in the configuration file. If you installed in on a mac in your application directory it will be `\u002FApplications\u002FFontForge.app\u002FContents\u002FMacOS\u002FFontForge`. You can set this value in the `compile-options.json` file.\n\n```JSON\n{\n  \"fontForge\": \"\u002FApplications\u002FFontForge.app\u002FContents\u002FMacOS\u002FFontForge\"\n}\n```\n\nTo compile the fonts run:\n```sh\nnpm run build-iconfont\n```\n\nBy default the stroke width is 2. You can change the stroke width in the `compile-options.json`\n```JSON\n{\n  \"strokeWidth\": 1.5,\n}\n```\n\nTo reduce the font file size you can choose to compile a sub set of icons. When you leave the array empty it will compile all the fonts. To compile only two icons you can set for example the following option in the `compile-options.json`:\n\n```JSON\n{\n  \"includeIcons\": [\"alert-octagon\", \"alert-triangle\"]\n}\n```\n\nOptional property `includeCategories` - an array or string of icon categories to include, category names are case-insensitive.\n```JSON\n{\n  \"includeCategories\": [\"Devices\", \"System\"]\n}\n```\nor\n```JSON\n{\n  \"includeCategories\": \"Devices System\"\n}\n```\n\nOptional property `excludeIcons` - an array of icon names using to exclude some category icons:\n```JSON\n{\n  \"includeCategories\": [\"system\"],\n  \"excludeIcons\": [\"adjustments\"]\n}\n```\n\nComplex solution:\n```JSON\n{\n  \"includeIcons\": [\"alert-octagon\", \"alert-triangle\"],\n  \"includeCategories\": [\"devices\", \"system\"],\n  \"excludeIcons\": [\"adjustments\"]\n}\n```\n\n### Jetpack Compose\n\nFor Android or Desktop you can use [`compose-icons`](https:\u002F\u002Fgithub.com\u002FDevSrSouza\u002Fcompose-icons) to use icons in your projects. (see [docs](https:\u002F\u002Fgithub.com\u002FDevSrSouza\u002Fcompose-icons\u002Fblob\u002Fmaster\u002Ftabler-icons\u002FDOCUMENTATION.md))\n\n## Multiple strokes\n\nAll icons in this repository have been created with the value of the `stroke-width` property, so if you change the value, you can get different icon variants that will fit in well with your design.\n\n\u003Cpicture>\n  \u003Csource media=\"(prefers-color-scheme: dark)\" srcset=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmaster\u002F.github\u002Ficons-stroke-dark.png\">\n  \u003Csource media=\"(prefers-color-scheme: light)\" srcset=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmaster\u002F.github\u002Ficons-stroke.png\">\n  \u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002Ftabler\u002Ftabler-icons\u002Fmaster\u002F.github\u002Ficons-stroke.png\" alt=\"Tabler Icons preview\" width=\"838\">\n\u003C\u002Fpicture>\n\n## License\n\nTabler Icons is licensed under the [MIT License](https:\u002F\u002Fgithub.com\u002Ftabler\u002Ftabler-icons\u002Fblob\u002Fmaster\u002FLICENSE).\n\n\n## Sponsor Tabler\n\n\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fcodecalm\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002Ftabler\u002Ftabler\u002Fraw\u002Fdev\u002Fsrc\u002Fstatic\u002Fsponsor-banner-readme.png?raw=true\" alt=\"Sponsor Tabler\" \u002F>\u003C\u002Fa>\n","Tabler Icons 是一个包含超过6000个高质量SVG图标的免费项目，适用于网页开发。每个图标基于24x24网格设计，并具有2px描边，支持轮廓和填充两种样式。该项目采用MIT许可证，提供了丰富的图标种类，可以轻松集成到各种前端框架如React、Svelte等中。适合用于需要丰富视觉元素的Web应用界面设计，无论是个人项目还是企业级应用都能找到合适的图标资源。",2,"2026-06-11 02:52:37","top_language"]