{"id":14981579,"url":"https://github.com/themesberg/flowbite-icons","last_synced_at":"2025-05-16T04:06:48.987Z","repository":{"id":175091599,"uuid":"653057474","full_name":"themesberg/flowbite-icons","owner":"themesberg","description":"Free and open-source collection of SVG icons built for Flowbite and Tailwind CSS","archived":false,"fork":false,"pushed_at":"2025-03-22T09:38:15.000Z","size":599,"stargazers_count":213,"open_issues_count":7,"forks_count":18,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-05-08T19:08:13.028Z","etag":null,"topics":["figma","flowbite","icon","icon-pack","icon-set","icons","icons-pack","iconset","react","svelte","svg","svg-icons","tailwind","vue"],"latest_commit_sha":null,"homepage":"https://flowbite.com/icons/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/themesberg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-13T10:23:03.000Z","updated_at":"2025-05-01T23:36:02.000Z","dependencies_parsed_at":"2024-03-11T11:26:15.595Z","dependency_job_id":"7ac3eea4-3a3b-48c6-a55a-3a904d387f13","html_url":"https://github.com/themesberg/flowbite-icons","commit_stats":{"total_commits":43,"total_committers":7,"mean_commits":6.142857142857143,"dds":0.5348837209302326,"last_synced_commit":"0225ea8922408ad4dd1ba849d15d3f92f368f4f1"},"previous_names":["themesberg/flowbite-icons"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite-icons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite-icons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite-icons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/themesberg%2Fflowbite-icons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/themesberg","download_url":"https://codeload.github.com/themesberg/flowbite-icons/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464896,"owners_count":22075570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["figma","flowbite","icon","icon-pack","icon-set","icons","icons-pack","iconset","react","svelte","svg","svg-icons","tailwind","vue"],"created_at":"2024-09-24T14:03:52.879Z","updated_at":"2025-05-16T04:06:43.975Z","avatar_url":"https://github.com/themesberg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n    \u003ca href=\"https://flowbite.com\" \u003e\n      \u003cimg alt=\"Flowbite Icons - Free and open-source SVG icons\" width=\"350\" src=\"https://flowbite.s3.amazonaws.com/github/flowbite-icons-logo-github.png\"\u003e\n    \u003c/a\u003e\u003cbr\u003e\n    Free and open-source collection of over 430+ SVG icons built for Tailwind CSS and Figma\n\u003c/p\u003e\n\n\u003cp\u003e\n    \u003ca href=\"https://discord.com/invite/4eeurUVvTy\"\u003e\u003cimg src=\"https://img.shields.io/discord/902911619032576090?color=%237289da\u0026label=Discord\" alt=\"Discord\"\u003e\u003c/a\u003e\n\u003c!--     \u003ca href=\"https://www.npmjs.com/package/flowbite\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/flowbite.svg\" alt=\"Total Downloads\"\u003e\u003c/a\u003e --\u003e\n\u003c!--     \u003ca href=\"https://github.com/themesberg/flowbite/releases\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/flowbite.svg\" alt=\"Latest Release\"\u003e\u003c/a\u003e --\u003e\n    \u003ca href=\"https://flowbite.com/docs/getting-started/license/\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-blue\" alt=\"Licenese\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## Getting started\n\nThe quickest way of you can start using these icons is by going to the [Flowbite Icons](https://flowbite.com/icons/) page and copy-paste the icons as raw SVG or JSX (React) by selecting the \"copy as\" option. You can also configure the icon size and stroke width via our custom interface.\n\n\u003ca href=\"https://flowbite.com/icons/\"\u003e\n  \u003cimg src=\"https://flowbite.s3.amazonaws.com/github/flowbite-icons-github.png\" alt=\"Flowbite Icons\"/\u003e\n\u003c/a\u003e\n\n## Basic usage\n\nThe default examples are provided with raw SVG code source which is a flexible and efficient way of integrating icons into your web application regardless of what tech stack you're using.\n\nHere is a solid and outline version of the same `notification-bell` icon:\n\n```xml\n\u003c!-- Notification bell solid --\u003e\n\u003csvg\n  class=\"w-6 h-6 text-gray-800 dark:text-white\"\n  aria-hidden=\"true\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  fill=\"currentColor\"\n  viewBox=\"0 0 14 20\"\n\u003e\n  \u003cpath\n    d=\"M12.133 10.632v-1.8A5.406 5.406 0 0 0 7.979 3.57.946.946 0 0 0 8 3.464V1.1a1 1 0 0 0-2 0v2.364a.946.946 0 0 0 .021.106 5.406 5.406 0 0 0-4.154 5.262v1.8C1.867 13.018 0 13.614 0 14.807 0 15.4 0 16 .538 16h12.924C14 16 14 15.4 14 14.807c0-1.193-1.867-1.789-1.867-4.175ZM3.823 17a3.453 3.453 0 0 0 6.354 0H3.823Z\"\n  /\u003e\n\u003c/svg\u003e\n\n\u003c!-- Notification bell outline --\u003e\n\u003csvg\n  class=\"w-6 h-6 text-gray-800 dark:text-white\"\n  aria-hidden=\"true\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  fill=\"none\"\n  viewBox=\"0 0 16 21\"\n\u003e\n  \u003cpath\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    stroke-width=\"2\"\n    d=\"M8 3.464V1.1m0 2.365a5.338 5.338 0 0 1 5.133 5.368v1.8c0 2.386 1.867 2.982 1.867 4.175C15 15.4 15 16 14.462 16H1.538C1 16 1 15.4 1 14.807c0-1.193 1.867-1.789 1.867-4.175v-1.8A5.338 5.338 0 0 1 8 3.464ZM4.54 16a3.48 3.48 0 0 0 6.92 0H4.54Z\"\n  /\u003e\n\u003c/svg\u003e\n```\n\nYou can copy and paste this into your project and you can set the color via `text-gray-500 dark:text-gray-400` and the size with the Tailwind CSS `w-{*}` width and `h-{*}` classes.\n\n## React\n\nThanks to the open-source community from React - the Flowbite Icons collection is now also available to be used in React projects by installing the official [React icons package](https://github.com/themesberg/flowbite-react-icons) built by [Sutu Sebastian](https://github.com/SutuSebastian).\n\n```sh\nnpm i flowbite-react-icons\n```\n\n```tsx\n// outline\n\nimport { AngleDown } from \"flowbite-react-icons/outline\";\n\nfunction Component() {\n  return \u003cAngleDown /\u003e;\n}\n```\n\n```tsx\n// solid\n\nimport { AngleDown } from \"flowbite-react-icons/solid\";\n\nfunction Component() {\n  return \u003cAngleDown /\u003e;\n}\n```\n\nLearn more about usage by going to the [Flowbite React Icons](https://github.com/themesberg/flowbite-react-icons) repository on GitHub.\n\n## Svelte\n\nThanks to the open-source community from Svelte - the Flowbite Icons collection is now also available to be used in Svelte projects by installing the official [Svelte icons package](https://github.com/themesberg/flowbite-svelte-icons) built by [shinokada](https://github.com/shinokada).\n\n```sh\nnpm i -D flowbite-svelte-icons\n```\n\nImport the icons from the freshly installed package:\n\n```svelte\n\u003cscript\u003e\n  import { AddressCardSolid } from 'flowbite-svelte-icons';\n\u003c/script\u003e\n\n\u003cAddressCardSolid /\u003e\n```\n\nLearn more about usage by going to the [Flowbite Svelte Icons](https://github.com/themesberg/flowbite-svelte-icons) repository on GitHub.\n\n## Laravel \u0026 Blade support\n\nThanks to the open-source community you can now also install and use the Flowbite Icons collection inside a Laravel project as Blade components based on the [Flowbite Blade Icons](https://github.com/themesberg/flowbite-blade-icons) repository built by [Dominique Thomas](https://github.com/domthomas-dev).\n\n### Installation\n\n```bash\ncomposer require themesberg/flowbite-blade-icons\n```\n\n### Usage\n\nIcons can be used as self-closing Blade components which will be compiled to SVG icons:\n\n```blade\n\u003cx-fwb-o-adjustments-horizontal /\u003e\n```\n\nFor the solid version:\n\n```blade\n\u003cx-fwb-s-adjustments-horizontal /\u003e\n```\n\n### See more\n\nYou can see more usages and configurations on the [Flowbite Blade Icons](https://github.com/themesberg/flowbite-blade-icons) repository.\n\n## Figma support\n\nIf you want to use Flowbite Icons inside your Figma project you can duplicate the following file from the community:\n\n🎨 [Flowbite Icons in Figma](https://www.figma.com/community/file/1253280241668899805/Flowbite-Icons)\n\n## Flowbite Blocks\n\nCheck out Flowbite Blocks to get access to over 330+ website sections coded in Tailwind CSS and Flowbite:\n\n📦 [Check out Flowbite Blocks](https://flowbite.com/blocks/)\n\n## Pro version\n\nIf you want to support this project you can consider purchasing the pro version of Flowbite which includes hundreds of advanced UI components, sections, pages, and a Figma design system:\n\n💎 [Check out Flowbite Pro](https://flowbite.com/pro/)\n\n## Community\n\nIf you need help or just want to discuss about the library join the community on Github:\n\n⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)\n\nFor casual chatting with others using the library:\n\n💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)\n\nVideo tutorials and presentations using Flowbite:\n\n🎥 [Subscribe to our YouTube channel](https://www.youtube.com/channel/UC_Ms4V2kYDsh7F_CSsHyQ6A)\n\n## Copyright and license\n\nFlowbite Icons is free and open-source under the MIT License.\n\n- 📝 [Read about the licensing terms](https://flowbite.com/docs/getting-started/license/)\n\nThe \"Flowbite name\" and logos are trademarks of Bergside Inc.\n\n- 📀 [Brand guideline and trademark usage agreement](https://flowbite.com/brand/)\n\n## Authors and credits\n\n- designed by [Evelyne Krall](https://twitter.com/EvelyneKrall)\n- integration in Figma by [Robert Tanislav](https://twitter.com/roberttanislav)\n- coding the interface by [Zoltán Szőgyényi](https://twitter.com/zoltanszogyenyi)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Fflowbite-icons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthemesberg%2Fflowbite-icons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthemesberg%2Fflowbite-icons/lists"}