{"id":21287528,"url":"https://github.com/tmcknight/blazor-heroicons","last_synced_at":"2026-02-28T07:36:34.376Z","repository":{"id":68007760,"uuid":"544121519","full_name":"tmcknight/blazor-heroicons","owner":"tmcknight","description":"A third-party Blazor component library for Heroicons.","archived":false,"fork":false,"pushed_at":"2025-07-14T13:17:24.000Z","size":678,"stargazers_count":14,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-24T06:38:33.717Z","etag":null,"topics":["blazor","heroicons","icons","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/tmcknight.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-10-01T17:48:37.000Z","updated_at":"2025-08-07T14:48:28.000Z","dependencies_parsed_at":"2024-06-18T19:01:39.175Z","dependency_job_id":"bef42b20-4c4a-4b2e-9d53-a6bef7efead2","html_url":"https://github.com/tmcknight/blazor-heroicons","commit_stats":null,"previous_names":["tmcknight/blazor-heroicons","tmcknight/blazor.heroicons"],"tags_count":17,"template":false,"template_full_name":null,"purl":"pkg:github/tmcknight/blazor-heroicons","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcknight%2Fblazor-heroicons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcknight%2Fblazor-heroicons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcknight%2Fblazor-heroicons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcknight%2Fblazor-heroicons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tmcknight","download_url":"https://codeload.github.com/tmcknight/blazor-heroicons/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tmcknight%2Fblazor-heroicons/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29924719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-27T19:37:42.220Z","status":"online","status_checked_at":"2026-02-28T02:00:07.010Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["blazor","heroicons","icons","tailwindcss"],"created_at":"2024-11-21T12:13:44.407Z","updated_at":"2026-02-28T07:36:34.372Z","avatar_url":"https://github.com/tmcknight.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\".github/icon.png\" alt=\"Blazor.Heroicons\" width=\"128\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eBlazor.Heroicons\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  A third-party Blazor component library for \u003ca href=\"https://heroicons.com\"\u003eHeroicons\u003c/a\u003e — beautiful hand-crafted SVG icons by the makers of Tailwind CSS.\n\u003c/p\u003e\n\n[![NuGet package](https://img.shields.io/nuget/v/Blazor.Heroicons?style=flat-square\u0026logo=nuget)](https://www.nuget.org/packages/Blazor.Heroicons)\n[![Heroicons version](https://img.shields.io/badge/heroicons-v2.2.0-informational?style=flat-square)](https://github.com/tailwindlabs/heroicons/releases/tag/v2.2.0)\n[![License](https://img.shields.io/github/license/tmcknight/Blazor.Heroicons?style=flat-square)](LICENSE)\n[![Build and test](https://img.shields.io/github/actions/workflow/status/tmcknight/Blazor.Heroicons/dotnet.yml?branch=main\u0026style=flat-square\u0026logo=github\u0026label=tests)](https://github.com/tmcknight/Blazor.Heroicons/actions/workflows/dotnet.yml)\n\n## 📦 Installation\n\n```sh\ndotnet add package Blazor.Heroicons\n```\n\nSupports .NET 8.0, .NET 9.0, and .NET 10.0.\n\n## 🎨 Icon Styles\n\nEach icon is available in four styles:\n\n| Style | Namespace | Size | Best for |\n|-------|-----------|------|----------|\n| **Outline** | `Blazor.Heroicons.Outline` | 24x24, 1.5px stroke | Primary navigation and marketing sections |\n| **Solid** | `Blazor.Heroicons.Solid` | 24x24, filled | Primary navigation and marketing sections |\n| **Mini** | `Blazor.Heroicons.Mini` | 20x20, filled | Smaller elements like buttons and form inputs |\n| **Micro** | `Blazor.Heroicons.Micro` | 16x16, filled | Tight, high-density UIs |\n\n[Browse the full list of icons on heroicons.com \u0026rarr;](https://heroicons.com)\n\n## 🚀 Usage\n\n### Individual icon components\n\nEach icon is available as a standalone Blazor component. Import the namespace for the style you want and use the icon directly:\n\n```razor\n@using Blazor.Heroicons.Outline\n\n\u003cBeakerIcon class=\"size-6 text-blue-500\" /\u003e\n```\n\nAll standard HTML attributes (`class`, `id`, `style`, etc.) are passed through to the underlying SVG element. Icons use `currentColor` for fill/stroke, so they can be styled with CSS or utility classes like [Tailwind CSS](https://tailwindcss.com/).\n\n### Dynamic icon by name (`\u003cHeroicon /\u003e`)\n\nReference any icon by name and style using the `Heroicon` component:\n\n```razor\n@using Blazor.Heroicons\n\n\u003cHeroicon Name=\"@HeroiconName.Sparkles\" Type=\"HeroiconType.Outline\" class=\"size-6 text-yellow-600\" /\u003e\n```\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `Name` | `string` | `HeroiconName.Sparkles` | Icon name — supports multiple formats (see below) |\n| `Type` | `HeroiconType` | `HeroiconType.Outline` | Icon style to render |\n\nThe `Name` parameter is flexible and accepts several formats:\n\n- `\"HandThumbUp\"` or `\"HandThumbUpIcon\"`\n- `\"hand-thumb-up\"` (hyphenated)\n- `\"handthumbup\"` (case-insensitive)\n\nUse the `HeroiconName` static class for IntelliSense support (e.g. `HeroiconName.AcademicCap`).\n\n### Random icon (`\u003cRandomHeroicon /\u003e`)\n\nRender a random icon from a given style:\n\n```razor\n@using Blazor.Heroicons\n\n\u003cRandomHeroicon Type=\"HeroiconType.Mini\" class=\"size-6 text-green-700\" /\u003e\n```\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `Type` | `HeroiconType` | `HeroiconType.Outline` | Icon style to choose from |\n\n## 🔗 Links\n\n- [Heroicons](https://heroicons.com)\n- [Release notes](https://github.com/tmcknight/Blazor.Heroicons/releases)\n- [NuGet package](https://www.nuget.org/packages/Blazor.Heroicons)\n- [License](https://github.com/tmcknight/Blazor.Heroicons/blob/main/LICENSE)\n\n## 📄 License\n\nThis library is MIT licensed.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmcknight%2Fblazor-heroicons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftmcknight%2Fblazor-heroicons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftmcknight%2Fblazor-heroicons/lists"}