heroicons 1.0.3

Django templates

1. Install with python -m pip install heroicons[django].

2. Add to your INSTALLED_APPS:

   INSTALLED_APPS = [
       ...,
       'heroicons',
       ...,
   ]

Now in your templates you can load the template library with:

{% load heroicons %}

This provides two tags to render <svg> icons: heroicon_outline and heroicon_solid, corresponding to the two icon styles in the set. The tags take these arguments:

• name, positional: the name of the icon to use. You can see the icon names on the heroicons.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: 24 for outline and 20 for solid.

• Any number of keyword arguments. These will be added as HTML attributes to the output <svg> tag. Underscores in attribute names will be replaced with dashes, allowing you to define e.g. data- attributes.

For example, to render an outline “academic-cap” icon, at 48x48, with some extra CSS classes and a data attribute “controller”, you would write:

{% heroicon_outline "academic-cap" size=48 class="h-4 w-4 inline" data_controller="academia" %}

Jinja templates

1. Install with python -m pip install heroicons[jinja].

2. Adjust your Jinja Environment to add the two global functions heroicon_outline and heroicon_solid, imported from heroicons.jinja. For example:

   from heroicons.jinja import heroicon_outline, heroicon_solid
   from jinja2 import Environment
   
   env = Environment()
   env.globals.update(
       {
           "heroicon_outline": heroicon_outline,
           "heroicon_solid": heroicon_solid,
       }
   )

Now in your templates you can call those two functions, which render <svg> icons corresponding to the two 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 the heroicons.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: 24 for outline and 20 for solid.

• Any number of keyword arguments. These will be added as HTML attributes to the output <svg> tag. Underscores in attribute names will be replaced with dashes, allowing you to define e.g. data- attributes.

For example, to render an outline “academic-cap” icon, at 48x48, with some extra CSS classes and a data attribute “controller”, you would write:

{{ heroicon_outline("academic-cap", size=48, class="h-4 w-4 inline", data_controller="academia") %}