A Hugo module

Inline SVG icons, with parameters.

Export icons from any of the 200+ Iconify sets, then size, rotate, flip, recolor, and label them straight from templates and Markdown, with accessibility handled by default.

Every icon on this page is rendered by the module at build time. The output is byte-tested against the go-swarm-icons Go library.

Markdown shortcode
Live demo · pick any value below and watch the icon and its shortcode update
size
rotate
flip
color

size=  width=  height=

Sizing

Give one dimension and the other derives from the icon's aspect ratio, CSS units preserved. The banner icon below has a non-square 20×24 viewBox; the module keeps it undistorted.

size="48"
Width and height set together.
width="3em"
Height derives to 3.6em from the 20×24 viewBox.
height="48"
Width derives to 40, ratio intact.
width="unset"
Attributes removed; CSS takes over.

rotate=  flip=

Rotate and flip

Rotation and flips collapse into a single transform declaration, and they append to any style you pass instead of overwriting it.

rotate="45"
flip="h"
rotate="90" flip="both"
style="color:…" rotate="180"

fill=  stroke=  style=

Color

Icon sets draw with currentColor, so icons inherit the surrounding CSS color with no configuration. Override per instance with style, fill, or stroke.

inherits body text
inherits cyan
inherits amber
inherits coral

title=  attrs=

Accessibility

Decorative icons are hidden from screen readers. Pass title or aria-label and the icon switches to labeled mode. This is the module's real output, byte for byte.

Decorative, the default
<svg aria-hidden="true"
     focusable="false"
     height="24" viewBox="0 0 24 24"
     width="24" …>
Notifications With title="Notifications"
<svg height="24" role="img"
     viewBox="0 0 24 24" width="24" …>
  <title>Notifications</title>

assets/icons/{prefix}/{name}.svg

Any Iconify set

Nothing is bundled. The swarm-icons CLI exports sanitized SVGs from Tabler, Heroicons, Font Awesome, Material Design, Simple Icons, and 200+ other sets, no Node.js required. Referencing an icon you haven't exported fails the build with the exact command to fix it.

search
settings
bell
bookmark
camera
cloud
rocket
moon
sun
bolt
flame
gift
map-pin
message-circle
music
palette
phone
photo
send
shield-check
thumb-up
trash
user
wifi
world
check
x
alert-triangle
download
upload
code
brush
feather
calendar
mail
lock