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 nowidth
andheight
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
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 |