Icons

Wagtail comes with an SVG icon set. The icons are used throughout the admin interface.

Elements that use icons are:

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:

# app/templates/app_name/toucan.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800" id="icon-toucan">
  <!--! CC0 license. https://creativecommons.org/publicdomain/zero/1.0/ -->
  <path d="M321 662v1a41 41 0 1 1-83-2V470c0-129 71-221 222-221 122 0 153-42 153-93 0-34-18-60-53-72v-4c147 23 203 146 203 257 0 107-80 247-277 247v79a41 41 0 1 1-82-1v46a41 41 0 0 1-83 0v-46Z"/>
  <path d="M555 136a23 23 0 1 0-46 0 23 23 0 0 0 46 0Zm-69-57H175c-60 0-137 36-137 145l9-8 367 6 72 18V79Z"/>
</svg>

The svg tag should:

  • Set the id="icon-<name>" attribute, icons are referenced by this name.

  • 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.

@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.

Icon template tag

Use an icon in a custom template:

{% load wagtailadmin_tags %}
{% icon name="toucan" classname="..." title="..." %}

Changing icons via hooks

@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 <your_app>/templates/wagtailadmin/icons/.

Available icons

Enable the 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
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 wagtailadmin/icons/warning.svg