(icons)= # 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](register_admin_menu_item) - [Client-side React components](extending_client_side_react) - [Rich text editor toolbar buttons](extending_the_draftail_editor) - [Snippets](wagtailsnippets_icon) - [StreamField blocks](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. - 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/`. (available_icons)= ## Available icons Enable the [styleguide](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 ```{include} ../_static/wagtail_icons_table.txt ```