{"id":48055453,"url":"https://github.com/coliff/bootstrap-icons-css","last_synced_at":"2026-04-04T14:26:59.864Z","repository":{"id":347218513,"uuid":"1178048609","full_name":"coliff/bootstrap-icons-css","owner":"coliff","description":"Bootstrap Icons as CSS Variables","archived":false,"fork":false,"pushed_at":"2026-03-27T04:37:51.000Z","size":634,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-27T15:21:25.414Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://coliff.github.io/bootstrap-icons-css/docs/","language":"JavaScript","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/coliff.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":".github/CODEOWNERS","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":".github/AGENTS.md","dco":null,"cla":null},"funding":{"github":"coliff","ko_fi":"coliff","custom":"https://paypal.me/coliff"}},"created_at":"2026-03-10T16:27:18.000Z","updated_at":"2026-03-27T04:29:04.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/coliff/bootstrap-icons-css","commit_stats":null,"previous_names":["coliff/bootstrap-icons-css"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/coliff/bootstrap-icons-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-icons-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-icons-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-icons-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-icons-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coliff","download_url":"https://codeload.github.com/coliff/bootstrap-icons-css/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fbootstrap-icons-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31402428,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2026-04-04T14:26:54.807Z","updated_at":"2026-04-04T14:26:59.855Z","avatar_url":"https://github.com/coliff.png","language":"JavaScript","funding_links":["https://github.com/sponsors/coliff","https://ko-fi.com/coliff","https://paypal.me/coliff"],"categories":[],"sub_categories":[],"readme":"# Bootstrap Icons in CSS\n\n[![npm version](https://img.shields.io/npm/v/bootstrap-icons-css.svg)](https://www.npmjs.com/package/bootstrap-icons-css)\n[![npm downloads](https://img.shields.io/npm/dm/bootstrap-icons-css.svg)](https://www.npmjs.com/package/bootstrap-icons-css)\n[![LICENSE: MIT](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://github.com/coliff/bootstrap-icons-css/blob/main/LICENSE)\n\nA 100% pure CSS icon implementation of [Bootstrap Icons](https://icons.getbootstrap.com/) using CSS custom properties and SVG masks.\n\n**Docs and icon gallery:** [https://coliff.github.io/bootstrap-icons-css/docs/](https://coliff.github.io/bootstrap-icons-css/docs/)\n\n- No JavaScript, dependencies, SVGs or webfonts needed!\n- 100% accessible, fast and easy-to-use\n- Includes all 2078 icons\n- Icons can be colored any color by setting `color` or `background-color`\n- Icon size can be set with `width` and `height` (icons scale to fit with `mask-size: contain`)\n\nBy using CSS custom properties the icons can also be used as background-images instead of masks if needed.\n\n## Advantages of using CSS variables\n\n- **Theme-aware** — Use a single stylesheet and change icon color via `color` or CSS variables; no need for separate icon assets per theme.\n- **One request** — All icons live in one CSS file instead of hundreds of SVGs or a webfont, reducing HTTP requests.\n- **Override locally** — Set `--bi-*` or `background-color` on any element (or a parent) to style icons without extra classes.\n- **Smaller payload** — Icons are defined once as data URIs in variables; repeated use doesn’t duplicate the SVG data in the DOM.\n- **No JS** — No runtime, no icon components, no tree-shaking step; works with plain HTML/CSS and any framework.\n- **Cascade-friendly** — Icons inherit `currentColor` and variables from the cascade, so they fit naturally into your design system.\n\n## Usage\n\nInclude the stylesheet:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"bootstrap-icons.min.css\" /\u003e\n```\n\nEach icon is exposed as a CSS variable `--bi-\u003cname\u003e` whose value is a `url(\"data:image/svg+xml;utf8,...\")` data URI.\n\n### CSS classes (webfont-style)\n\nUse the same class names as [Bootstrap Icons](https://icons.getbootstrap.com/): add the base class `bi` plus the icon class `bi-\u003cname\u003e`.\n\n```html\n\u003ci class=\"bi bi-0-circle\"\u003e\u003c/i\u003e\n\u003ci class=\"bi bi-heart\"\u003e\u003c/i\u003e\n\u003ci class=\"bi bi-star-fill\" style=\"color: #ffd700\"\u003e\u003c/i\u003e\n\u003ci class=\"bi bi-cpu\" style=\"height: 2rem; width: 2rem\"\u003e\u003c/i\u003e\n```\n\nIcons inherit `color` and default to 1rem. Resize with `width` and `height`.\n\n### As CSS variables (mask or background)\n\nUse the variables anywhere—e.g. a repeating mask with custom color and size:\n\n```css\n.my-banner {\n  background-color: hotpink;\n  display: inline-block;\n  height: 3rem;\n  mask-image: var(--bi-heart);\n  mask-repeat: repeat;\n  mask-size: 32px 32px;\n  width: 640px;\n}\n```\n\nOr as a background image with `background-image: var(--bi-heart);`, `background-size: contain`, etc.\n\n## Browser compatibility\n\n`mask-image` is supported unprefixed in all modern browsers (Chrome 120, Safari 15.4, Firefox 53 — [caniuse](https://caniuse.com/?search=mask-image)). To widen support (e.g. older Safari), use [Autoprefixer](https://github.com/postcss/autoprefixer) to add `-webkit-mask-image` alongside `mask-image`. Because this uses CSS variables, the same variables are referenced from `:root` without increasing filesize. Neat!\n\n## File size\n\nThe stylesheet is approx 1.3 MB (~230 KB gzipped) and includes all 2078 icons. **I recommend only including the CSS (or variables) for the icons you need to reduce file size and improve performance.**\n\n## License\n\n[MIT](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fbootstrap-icons-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoliff%2Fbootstrap-icons-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fbootstrap-icons-css/lists"}