Icons¶

Thanks to the sphinx-iconify plugin (link), we can use Iconify icons in documents.

Icon repo¶

You can view and search all available icons at [icon-sets.iconify.design]. Once you find the perfect icon, click it and copy the name, which looks something like simple-icons:sphinx. This corresponds to icon-pack:icon-name.

Using icons in Sphinx docs ¶

You can embed icons anywhere you can put text, including headers (like this one!)

Markdown¶

If your page is written in Markdown, embed an icon like so:

example.md¶

{iconify}`simple-icons:sphinx`

ReStructuredText¶

Todo

Build out this section so that the rst components don’t accidentally get parsed.

Probably something to do with code fences using colons?

Modifying icons¶

You can tweak/modify icons in a few different ways.

Size¶

You can set a size (in pixels) directly after the icon name:

example.md¶

{iconify}`simple-icons:sphinx width=64px height=64px`

Color¶

As part of the Shibuya theme for Sphinx, you can also use any Shibuya accent color to color an icon:

example.md¶

{iconify}`simple-icons:sphinx data-accent-color=tomato`
{iconify}`simple-icons:sphinx data-accent-color=violet`
{iconify}`simple-icons:sphinx data-accent-color=grass`
{iconify}`simple-icons:sphinx data-accent-color=brown`
{iconify}`simple-icons:sphinx data-accent-color=orange`
{iconify}`simple-icons:sphinx data-accent-color=lime`
{iconify}`simple-icons:sphinx data-accent-color=sky`

Combining attributes¶

You can combine multiple attributes like so:

example.md¶

{iconify}`simple-icons:sphinx width=64px height=64px data-accent-color=violet`