# Reference - Icons

The `icon` shortcode and partial render inline SVG icons.

## Usage

Use the shortcode in Markdown files, or the partial in layouts. Pass the icon name, or a path relative to `assets/icons/`. A bare name resolves to the first match, and a full path matches exactly. **A bare name is sufficient in most cases**.

```go-template {title="Use as shortcode"}
{{</* icon "twitter" */>}}
{{</* icon "fa/brands/twitter" */>}}
```

```go-template {title="Use as partial"}
{{ partial "components/icon.html" "twitter" }}
{{ partial "components/icon.html" "fa/brands/twitter" }}
```

## Custom Icons

Place any `.svg` file under `assets/icons/` in your project root. Add `fill="currentColor"` to the SVG root element so the icon inherits the surrounding text color.

## References

All available icons are listed below.

### Yore

Icons bundled with the theme. Path prefix: `yore/`.

{{< docs-icon path="yore/" >}}

### Brand

Icons sourced from [Fort Awesome Brands](https://fontawesome.com/icons/packs/brands). Path prefix: `fa/brands/`.

{{< docs-icon path="yore" path="fa/brands/" >}}

### Iconoir

Icons sourced from [Iconoir](https://iconoir.com/). Path prefixes: `iconoir/regular/` and `iconoir/solid/`. Iconoir icons are not printed due to the size of the collection.

Notable icons are:

- menu
- nav
- arrow

#### Regular

{{< docs-icon path="yore" path="iconoir/regular/" printIcon=false >}}

#### Solid

{{< docs-icon path="yore" path="iconoir/solid/" printIcon=false >}}