-{{< md >}}
-### Package manager
-Install [Bootstrap Icons](https://www.npmjs.com/package/bootstrap-icons)—including SVGs, icon sprite, and icon fonts—with npm or Composer. Then, choose how you'd like to include the icons with the [usage instructions](#usage).
-
-{{< highlight sh >}}
-npm i bootstrap-icons
-{{< /highlight >}}
-{{< highlight sh >}}
-composer require twbs/bootstrap-icons
-{{< /highlight >}}
-{{< /md >}}
-
-
-{{< md >}}
-### Download
-[Releases are published on GitHub](https://github.com/twbs/icons/releases/) and include icon SVGs, fonts, license, and readme. Our `package.json` is also included, though our npm scripts are primarily available for our development workflows.
-
-Download latest ZIP
-{{< /md >}}
-
-
-{{< md >}}
-### CDN
-Include the icon fonts stylesheet—in your website `` or via `@import` in CSS—from our CDN and get started in seconds. [See icon font docs](#icon-font) for examples.
-
-{{< highlight html >}}
-
-{{< /highlight >}}
-
-{{< highlight css >}}
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@{{< param version >}}/font/bootstrap-icons.css");
-{{< /highlight >}}
-{{< /md >}}
-
-
-
-## Usage
-
-Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. We recommend using a `width: 1em` (and optionally `height: 1em`) for easy resizing via `font-size`.
-
-
-
-{{< md >}}
-### Embedded
-Embed your icons within the HTML of your page (as opposed to an external image file). Here we've used a custom `width` and `height`.
-{{< /md >}}
-
-
- {{< example >}}{{< /example >}}
-
-
-
-
-
-{{< md >}}
-### Sprite
-Use the SVG sprite to insert any icon through the `
-{{< md >}}
-### External image
-Copy the Bootstrap Icons SVGs to your directory of choice and reference them like normal images with the `` element.
-{{< /md >}}
-
-
- {{< example >}}{{< /example >}}
-
-
-
-
-
-{{< md >}}
-### Icon font
-Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML (e.g., ``).
-
-Use `font-size` and `color` to change the icon appearance.
-{{< /md >}}
-
-
- {{< example >}}{{< /example >}}
- {{< example >}}{{< /example >}}
-
-
-
-
-
-{{< md >}}
-### CSS
-You can also use the SVG within your CSS (**be sure to escape any characters**, such as `#` to `%23` when specifying hex color values). When no dimensions are specified via `width` and `height` on the `
-{{< md >}}
-## Styling
-Color can be changed by setting a `.text-*` class or custom CSS:
-{{< /md >}}
-
-
-
-
-
-{{< highlight html >}}
-
-{{< /highlight >}}
-
-
-
-
-
-{{< md >}}
-## Accessibility
-For purely decorative icons, add `aria-hidden="true"`. Otherwise, provide an appropriate text alternative. Depending on which method you're using to add the icons, and where you're using them (e.g. as standalone images, or as the only content of a button or similar control), there are various possible approaches. Here are a few examples:
-{{< /md >}}
-
-
-
-
-
-{{< highlight html >}}
-
-
-{{< /highlight >}}
-
-
-
-
-{{< highlight html >}}
-
-{{< /highlight >}}
-
-
-
-{{< highlight html >}}
-
-
-{{< /highlight >}}
-
-
-
-
-
-{{< md >}}
-## Working with SVGs
-SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, we haven't included these attributes and workarounds in our code.
-{{< /md >}}
-
-
-{{< md >}}
-Known issues include:
-
-- **SVGs receive focus by default in Internet Explorer and Edge Legacy.** When embedding your SVGs, add `focusable="false"` to the `
-
diff --git a/docs/content/docs.md b/docs/content/docs.md
new file mode 100644
index 0000000000..d4b0bc2e6c
--- /dev/null
+++ b/docs/content/docs.md
@@ -0,0 +1,229 @@
+---
+title: Docs
+description: Learn how to install and use Bootstrap Icons in a variety of ways.
+layout:
+---
+
+## Install
+
+Bootstrap Icons are published to npm, but they can also be manually downloaded if needed.
+
+
+
+{{< md >}}
+### Package manager
+Install [Bootstrap Icons](https://www.npmjs.com/package/bootstrap-icons)—including SVGs, icon sprite, and icon fonts—with npm or Composer. Then, choose how you'd like to include the icons with the [usage instructions](#usage).
+
+{{< highlight sh >}}
+npm i bootstrap-icons
+{{< /highlight >}}
+{{< highlight sh >}}
+composer require twbs/bootstrap-icons
+{{< /highlight >}}
+{{< /md >}}
+
+
+{{< md >}}
+### Download
+[Releases are published on GitHub](https://github.com/twbs/icons/releases/) and include icon SVGs, fonts, license, and readme. Our `package.json` is also included, though our npm scripts are primarily available for our development workflows.
+
+Download latest ZIP
+{{< /md >}}
+
+
+{{< md >}}
+### CDN
+Include the icon fonts stylesheet—in your website `` or via `@import` in CSS—from our CDN and get started in seconds. [See icon font docs](#icon-font) for examples.
+
+{{< highlight html >}}
+
+{{< /highlight >}}
+
+{{< highlight css >}}
+@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@{{< param version >}}/font/bootstrap-icons.css");
+{{< /highlight >}}
+{{< /md >}}
+
+
+
+## Usage
+
+Bootstrap Icons are SVGs, so you can include them into your HTML in a few ways depending on how your project is setup. We recommend using a `width: 1em` (and optionally `height: 1em`) for easy resizing via `font-size`.
+
+
+
+{{< md >}}
+### Embedded
+Embed your icons within the HTML of your page (as opposed to an external image file). Here we've used a custom `width` and `height`.
+{{< /md >}}
+
+
+ {{< example >}}{{< /example >}}
+
+
+
+
+
+{{< md >}}
+### Sprite
+Use the SVG sprite to insert any icon through the `
+
+{{< example >}}
+
+
+
+{{< /example >}}
+
+
+
+
+
+{{< md >}}
+### External image
+Copy the Bootstrap Icons SVGs to your directory of choice and reference them like normal images with the `` element.
+{{< /md >}}
+
+
+ {{< example >}}{{< /example >}}
+
+
+
+
+
+{{< md >}}
+### Icon font
+Icon fonts with classes for every icon are also included for Bootstrap Icons. Include the icon web fonts in your page via CSS, then reference the class names as needed in your HTML (e.g., ``).
+
+Use `font-size` and `color` to change the icon appearance.
+{{< /md >}}
+
+
+ {{< example >}}{{< /example >}}
+ {{< example >}}{{< /example >}}
+
+
+
+
+
+{{< md >}}
+### CSS
+You can also use the SVG within your CSS (**be sure to escape any characters**, such as `#` to `%23` when specifying hex color values). When no dimensions are specified via `width` and `height` on the `
+{{< md >}}
+## Styling
+Color can be changed by setting a `.text-*` class or custom CSS:
+{{< /md >}}
+
+
+
+
+
+{{< highlight html >}}
+
+{{< /highlight >}}
+
+
+
+
+
+{{< md >}}
+## Accessibility
+For purely decorative icons, add `aria-hidden="true"`. Otherwise, provide an appropriate text alternative. Depending on which method you're using to add the icons, and where you're using them (e.g. as standalone images, or as the only content of a button or similar control), there are various possible approaches. Here are a few examples:
+{{< /md >}}
+
+
+
+
+
+{{< highlight html >}}
+
+
+{{< /highlight >}}
+
+
+
+{{< highlight html >}}
+
+{{< /highlight >}}
+
+
+
+{{< highlight html >}}
+
+{{< /highlight >}}
+
+
+
+{{< highlight html >}}
+
+
+{{< /highlight >}}
+
+
+
+
+
+{{< md >}}
+## Working with SVGs
+SVGs are awesome to work with, but they do have some known quirks to work around. Given the numerous ways in which SVGs can be used, we haven't included these attributes and workarounds in our code.
+{{< /md >}}
+
+
+{{< md >}}
+Known issues include:
+
+- **SVGs receive focus by default in Internet Explorer and Edge Legacy.** When embedding your SVGs, add `focusable="false"` to the `
{{< /example >}}
-