# Icons

> The 35 custom Renovaré icons as SVG downloads, with sizing and coloring rules.

*A hand-drawn line set.*

Renovaré uses its own single-color line icons. They inherit the color of the surrounding text, so set the color on the parent (or with a `text-*` class) and give the SVG `fill-current`. Click any icon to download its SVG.

**Interface:** [arrow](https://styleguide.renovare.org/assets/icons/arrow.svg), [chevron](https://styleguide.renovare.org/assets/icons/chevron.svg), [close](https://styleguide.renovare.org/assets/icons/close.svg), [search](https://styleguide.renovare.org/assets/icons/search.svg), [download](https://styleguide.renovare.org/assets/icons/download.svg), [link](https://styleguide.renovare.org/assets/icons/link.svg), [play](https://styleguide.renovare.org/assets/icons/play.svg), [check](https://styleguide.renovare.org/assets/icons/check.svg), [grid](https://styleguide.renovare.org/assets/icons/grid.svg), [explore](https://styleguide.renovare.org/assets/icons/explore.svg), [archive](https://styleguide.renovare.org/assets/icons/archive.svg), [screen](https://styleguide.renovare.org/assets/icons/screen.svg), [edit](https://styleguide.renovare.org/assets/icons/edit.svg), [trash](https://styleguide.renovare.org/assets/icons/trash.svg), [visible](https://styleguide.renovare.org/assets/icons/visible.svg), [invisible](https://styleguide.renovare.org/assets/icons/invisible.svg)

**Spiritual & thematic:** [bible](https://styleguide.renovare.org/assets/icons/bible.svg), [book](https://styleguide.renovare.org/assets/icons/book.svg), [candle](https://styleguide.renovare.org/assets/icons/candle.svg), [cross](https://styleguide.renovare.org/assets/icons/cross.svg), [crown](https://styleguide.renovare.org/assets/icons/crown.svg), [dove](https://styleguide.renovare.org/assets/icons/dove.svg), [fish](https://styleguide.renovare.org/assets/icons/fish.svg), [heart](https://styleguide.renovare.org/assets/icons/heart.svg), [prayer](https://styleguide.renovare.org/assets/icons/prayer.svg), [scripture](https://styleguide.renovare.org/assets/icons/scripture.svg)

**Content types:** [article](https://styleguide.renovare.org/assets/icons/article.svg), [guide](https://styleguide.renovare.org/assets/icons/guide.svg), [newspaper](https://styleguide.renovare.org/assets/icons/newspaper.svg), [podcast](https://styleguide.renovare.org/assets/icons/podcast.svg), [video](https://styleguide.renovare.org/assets/icons/video.svg), [person](https://styleguide.renovare.org/assets/icons/person.svg), [group](https://styleguide.renovare.org/assets/icons/group.svg), [map](https://styleguide.renovare.org/assets/icons/map.svg), [pin](https://styleguide.renovare.org/assets/icons/pin.svg)

## Sizes

| Use | Size | Classes |
|---|---|---|
| Inside buttons and text links | 13.5px | `w-3 h-3` |
| Next to labels and in lists | 18–22.5px | `w-4 h-4` to `w-5 h-5` |
| Resource and hero icon tiles | 54–90px colored tiles | `w-12 md:w-16 lg:w-20 p-4 md:p-6 rounded bg-primary` |

## Rules

- Use these icons only. Don't substitute Lucide, Heroicons, emoji or Unicode symbols.
- Icon tiles use green or the accent rotation (Navy, Plum, Teal, Amber), with the icon in white.
- Icons support a label; they don't replace one. Icon-only buttons need an `aria-label`.