Package: heroicons
Useheroiconsin your Django and Jinja templates.Improve your Django and Git skillswithmy books.RequirementsPython 3.8 to 3.12 supported.Django 3.2 to 5.0 supported.UsageTheheroiconspackage supports both Django templates and Jinja templates.
Follow the appropriate guide below.Django templatesInstall withpython-mpip install heroicons[django].Add to yourINSTALLED_APPS:INSTALLED_APPS=[...,"heroicons",...,]Now your templates can load the template library with:{%loadheroicons%}Alternatively, make the library available in all templates by adding it tothe builtins option:TEMPLATES=[{"BACKEND":"django.template.backends.django.DjangoTemplates",# ..."OPTIONS":{# ..."builtins":[...,"heroicons.templatetags.heroicons",...,],},}]The library provides these tags to render SVG icons in their corresponding styles:heroicon_microheroicon_miniheroicon_outlineheroicon_solidThe tags take these arguments:name, positional: the name of the icon to use.
You can see the icon names on theheroicons.com grid.size, keyword: an integer that will be used for the width and height attributes of the output<svg>tag.
Defaults to the icons’ designed sizes:24for outline and solid,20for mini, and16for micro.
Can beNone, in which case no width or height attributes will be output.Any number of keyword arguments.
These will be added as attributes in the output HTML.
Underscores in attribute names will be replaced with dashes, allowing you to define e.g.data-attributes.Most attributes will be added to the<svg>tag containing the icon, but these attributes will be attached to the inner<path>tags instead:stroke-linecapstroke-linejoinvector-effectNote: unlike the SVG code you can copy fromheroicons.com, there is no defaultclass.ExamplesAn outline “academic-cap” icon:{%heroicon_outline"academic-cap"%}The same icon, solid, at 40x40 pixels, and a CSS class:{%heroicon_outline"academic-cap"size=40class="mr-4"%}That icon again, but with the paths changed to a narrower stroke width, and a “data-controller” attribute declared:{%heroicon_outline"academic-cap"stroke_width=1data_controller="academia"%}Jinja templatesInstall withpython-mpip install heroicons[jinja].Adjust your JinjaEnvironmentto add the globalheroicon_*functions fromheroicons.jinja.
For example:fromheroicons.jinjaimport(heroicon_micro,heroicon_mini,heroicon_outline,heroicon_solid,)fromjinja2importEnvironmentenv=Environment()env.globals.update({"heroicon_micro":heroicon_micro,"heroicon_mini":heroicon_mini,"heroicon_outline":heroicon_outline,"heroicon_solid":heroicon_solid,})Now in your templates you can call those functions, which render<svg>icons corresponding to the icon styles in the set.
The functions take these arguments:name, positional: the name of the icon to use.
You can see the icon names on theheroicons.com grid.size, keyword: an integer that will be used for the width and height attributes of the output<svg>tag.
Defaults to the icons’ designed sizes:24for outline and solid,20for mini, and16for micro.
Can beNone, in which case no width or height attributes will be output.Any number of keyword arguments.
These will be added as HTML attributes to the output HTML.
Underscores in attribute names will be replaced with dashes, allowing you to define e.g.data-attributes.Most attributes will be added to the<svg>tag containing the icon, but these attributes will be attached to the inner<path>tags instead:stroke-linecapstroke-linejoinvector-effectNote: unlike the SVG code you can copy fromheroicons.com, there is no defaultclass.ExamplesAn outline “academic-cap” icon:{{heroicon_outline("academic-cap")}}The same icon, solid, at 40x40 pixels, and a CSS class:{{heroicon_solid("academic-cap",size=40,class="mr-4")%}That icon again, but with the paths changed to a narrower stroke width, and a “data-controller” attribute declared:{{heroicon_outline("academic-cap",stroke_width=1,data_controller="academia")%}CLIMany icons were renamed in version 2 of heroicons.
To assist you with migrating from version 1, this package includes a CLI that can update your heroicons template tags.Invoke the CLI like so:$python-mheroiconsupdate<filename><filename2>...To run it on all your template files, you can usegitls-files| xargs:$gitls-files--'*.html'|xargspython-mheroiconsupdateThe tool will update icon names for those that were renamed in v2, as per the table in theheroicons release notes.
It should find both Django and Jinja template tags:-{% heroicon_outline "archive" class="mr-2" %}+{% heroicon_outline "archive-box" class="mr-2" %}-{{ heroicon_solid("archive", class="mr-2") }}+{{ heroicon_solid("archive-box", class="mr-2") }}Also note thatsolidicons changed their default size from 20px to 24px.
If you are using them without specifying a size, they will now be larger, which could break some designs.
You can keep the v1 size by specifying it exactly:{%heroicon_solid"archive-box"size=20%}{{heroicon_solid("archive-box",size=20)}}Or through other mechanisms:Tailwind’swidthandheightclasses:w-5h-5other CSS classessizing the containing elementsDue to the variety of ways to size icons, it’s unfortunately not possible to automatically add the size to unsized solid icons.Good luck, and may the odds be ever in your favour.