# Icons
Wagtail comes with an SVG icon set. The icons are used throughout the admin interface.
Elements that use icons are:
- [Register Admin Menu Item](../reference/hooks.md#register-admin-menu-item)
- [Client-side React components](../extending/extending_client_side.md#extending-client-side-react)
- [Rich text editor toolbar buttons](../extending/extending_draftail.md#extending-the-draftail-editor)
- [Snippets](../topics/snippets/customizing.md#wagtailsnippets-icon)
- [StreamField blocks](customization/streamfield_blocks.md#custom-streamfield-blocks)
This document describes how to choose, add and customize icons.
## Add a custom icon
Draw or download an icon and save it in a template folder:
```xml
# app/templates/app_name/toucan.svg
```
The `svg` tag should:
- Set the `id="icon-"` attribute, icons are referenced by this `name`. The `name` should only contain lowercase letters, numbers, and hyphens.
- Set the `xmlns="http://www.w3.org/2000/svg"` attribute.
- Set the `viewBox="..."` attribute, and no `width` and `height` attributes.
- If the icon should be mirrored in right-to-left (RTL) languages, set the `class="icon--directional"` attribute.
- Include license / source information in a `` HTML comment, if applicable.
Set `fill="currentColor"` or remove `fill` attributes so the icon color changes according to usage.
Add the icon with the `register_icons` hook.
```python
@hooks.register("register_icons")
def register_icons(icons):
return icons + ['app_name/toucan.svg']
```
The majority of Wagtail’s default icons are drawn on a 16x16 viewBox, sourced from the [FontAwesome v6 free icons set](https://fontawesome.com/v6/search?m=free).
## Icon template tag
Use an icon in a custom template:
```html+django
{% load wagtailadmin_tags %}
{% icon name="toucan" classname="..." title="..." %}
```
## Changing icons via hooks
```python
@hooks.register("register_icons")
def register_icons(icons):
icons.remove("wagtailadmin/icons/time.svg") # Remove the original icon
icons.append("path/to/time.svg") # Add the new icon
return icons
```
## Changing icons via template override
When several applications provide different versions of the same template, the application listed first in `INSTALLED_APPS` has precedence.
Place your app before any Wagtail apps in `INSTALLED_APPS`.
Wagtail icons live in `wagtail/admin/templates/wagtailadmin/icons/`.
Place your own SVG files in `/templates/wagtailadmin/icons/`.
### Using custom icons in the user bar
The user bar provides quick actions within page views when logged in. To customize the items shown in the user bar, you can use the [`construct_wagtail_userbar`](../reference/hooks.md#construct-wagtail-userbar) hook. If you want to use custom icons within these menu items they must be made available in the correct template.
```html+django
{# /templates/wagtailadmin/userbar/base.html #}
{% extends "wagtailadmin/userbar/base.html" %}
{% block icons %}
{{ block.super }}
{% include "wagtailadmin/icons/toucan.svg" %}
{% endblock %}
```
## Available icons
Enable the [styleguide](../contributing/ui_guidelines.md#styleguide) to view the available icons and their names for any given project.
Here are all available icons out of the box:
Toggle icons table
register_icons entries from wagtailadmin/icons
Visual
Name
Source
File path
arrow-down
Custom icon
wagtailadmin/icons/arrow-down.svg
arrow-right-full
right-long (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/arrow-right-full.svg
arrow-left
Custom icon
wagtailadmin/icons/arrow-left.svg
arrow-right
Custom icon
wagtailadmin/icons/arrow-right.svg
arrow-up
Custom icon
wagtailadmin/icons/arrow-up.svg
bars
bars (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/bars.svg
bin
trash-can (regular): Font Awesome Pro 6.4.0
wagtailadmin/icons/bin.svg
bold
bold (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/bold.svg
breadcrumb-expand
Custom icon
wagtailadmin/icons/breadcrumb-expand.svg
calendar
calendar (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/calendar.svg
calendar-alt
calendar-days (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/calendar-alt.svg
calendar-check
calendar-check (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/calendar-check.svg
check
check (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/check.svg
circle-check
circle-check (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/circle-check.svg
circle-plus
circle-plus (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/circle-plus.svg
circle-xmark
circle-xmark (regular): Font Awesome Pro 6.4.0
wagtailadmin/icons/circle-xmark.svg
clipboard-list
clipboard-list (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/clipboard-list.svg
code
code (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/code.svg
cog
gear (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/cog.svg
cogs
gears (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/cogs.svg
copy
clone (regular): Font Awesome Pro 6.4.0
wagtailadmin/icons/copy.svg
collapse-down
Custom icon
wagtailadmin/icons/collapse-down.svg
collapse-up
Custom icon
wagtailadmin/icons/collapse-up.svg
comment
comment-dots (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/comment.svg
comment-add
Custom icon
wagtailadmin/icons/comment-add.svg
comment-add-reversed
Custom icon
wagtailadmin/icons/comment-add-reversed.svg
cross
xmark (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/cross.svg
crosshairs
crosshairs (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/crosshairs.svg
cut
scissors (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/cut.svg
date
calendar-day (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/date.svg
decimal
Custom icon
wagtailadmin/icons/decimal.svg
desktop
desktop (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/desktop.svg
doc-empty-inverse
file (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/doc-empty-inverse.svg
doc-empty
file (regular): Font Awesome Pro 6.4.0
wagtailadmin/icons/doc-empty.svg
doc-full-inverse
file-lines (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/doc-full-inverse.svg
doc-full
file-lines (regular): Font Awesome Pro 6.4.0
wagtailadmin/icons/doc-full.svg
dots-horizontal
ellipsis (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/dots-horizontal.svg
download
download (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/download.svg
draft
Custom icon
wagtailadmin/icons/draft.svg
edit
pen (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/edit.svg
expand-right
Custom icon
wagtailadmin/icons/expand-right.svg
error
circle-xmark (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/error.svg
folder-inverse
folder (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/folder-inverse.svg
folder-open-1
folder-open (regular): Font Awesome Pro 6.4.0
wagtailadmin/icons/folder-open-1.svg
folder-open-inverse
folder-open (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/folder-open-inverse.svg
folder
folder (regular): Font Awesome Pro 6.4.0
wagtailadmin/icons/folder.svg
form
rectangle-list (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/form.svg
glasses
glasses (classic): Font Awesome Pro 6.5.1
wagtailadmin/icons/glasses.svg
globe
globe (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/globe.svg
grip
Custom icon
wagtailadmin/icons/grip.svg
group
user-group (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/group.svg
h1
Custom icon
wagtailadmin/icons/h1.svg
h2
Custom icon
wagtailadmin/icons/h2.svg
h3
Custom icon
wagtailadmin/icons/h3.svg
h4
Custom icon
wagtailadmin/icons/h4.svg
h5
Custom icon
wagtailadmin/icons/h5.svg
h6
Custom icon
wagtailadmin/icons/h6.svg
help
circle-question (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/help.svg
history
clock-rotate-left (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/history.svg
home
house (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/home.svg
image
image (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/image.svg
info-circle
circle-info (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/info-circle.svg
italic
italic (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/italic.svg
key
key (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/key.svg
keyboard
keyboard (solid): Font Awesome Free 6.5.1
wagtailadmin/icons/keyboard.svg
link
link (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/link.svg
link-external
up-right-from-square (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/link-external.svg
list-ol
list-ol (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/list-ol.svg
list-ul
list-ul (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/list-ul.svg
lock-open
lock-open (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/lock-open.svg
lock
lock (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/lock.svg
login
right-to-bracket (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/login.svg
logout
Custom icon
wagtailadmin/icons/logout.svg
mail
envelope (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/mail.svg
media
circle-play (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/media.svg
minus
minus (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/minus.svg
mobile-alt
mobile-screen-button (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/mobile-alt.svg
no-view
eye-slash (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/no-view.svg
openquote
quote-left (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/openquote.svg
order-down
arrow-down (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/order-down.svg
order-up
arrow-up (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/order-up.svg
order
arrow-down-1-9 (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/order.svg
password
key (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/password.svg
pick
star (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/pick.svg
pilcrow
paragraph (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/pilcrow.svg
placeholder
circle-chevron-down (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/placeholder.svg
plus-inverse
circle-plus (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/plus-inverse.svg
plus
plus (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/plus.svg
radio-empty
circle (regular): Font Awesome Pro 6.4.0
wagtailadmin/icons/radio-empty.svg
radio-full
circle (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/radio-full.svg
redirect
diamond-turn-right (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/redirect.svg
regex
Custom icon
wagtailadmin/icons/regex.svg
resubmit
right-left (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/resubmit.svg
rotate
rotate (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/rotate.svg
search
magnifying-glass (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/search.svg
site
earth-americas (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/site.svg
sliders
sliders (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/sliders.svg
snippet
leaf (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/snippet.svg
spinner
spinner (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/spinner.svg
strikethrough
strikethrough (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/strikethrough.svg
success
circle-check (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/success.svg
subscript
subscript (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/subscript.svg
superscript
superscript (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/superscript.svg
table
table (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/table.svg
tablet-alt
tablet-screen-button (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/tablet-alt.svg
tag
tag (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/tag.svg
tasks
list-check (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/tasks.svg
thumbtack
thumbtack (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/thumbtack.svg
thumbtack-crossed
Custom icon
wagtailadmin/icons/thumbtack-crossed.svg
tick-inverse
square-check (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/tick-inverse.svg
time
clock (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/time.svg
title
heading (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/title.svg
upload
upload (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/upload.svg
user
user (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/user.svg
view
eye (solid): Font Awesome Pro 6.4.0
wagtailadmin/icons/view.svg
wagtail-icon
Custom icon
wagtailadmin/icons/wagtail.svg
warning
triangle-exclamation (solid): Font Awesome Pro 6.4.0