Lucide icons for Jekyll
Easily embed Lucide icons as inline SVGs in your Jekyll templates.
I wanted to use Lucide icons on this site and was surprised to find that a Jekyll plugin didn’t exist yet. Lucide has become my go-to icon set for almost everything, so I figured someone would have already built exactly what I needed.
They hadn’t, so I did.
Adapting from Rails
Fortunately, I didn’t have to start from scratch. I found lucide-rails, and it basically worked exactly how I wanted, just for Rails and not Jekyll.
Huge thanks to Vito for making the original Rails gem. That foundation made putting jekyll-lucide together a breeze.
How it works
The plugin provides a lucide_icon Liquid tag. You just pass the name of the icon and any optional attributes like size, class, or stroke-width.
{% lucide_icon "home" %}
{% lucide_icon "arrow-right" size="32" class="my-icon" %}
{% lucide_icon "search" stroke-width="1.5" %}
It renders the icon as an inline <svg>. No extra HTTP requests, no icon fonts, no external image files. You can style them directly with CSS using currentColor, and override default attributes globally in _config.yml or per-icon in your templates.
Configuration
If you want all your icons to have a specific class or stroke width by default, you can set that up in your _config.yml:
lucide:
defaults:
class: "lucide-icon"
stroke-width: "1.5"
The only downside is that the gem bundles all 1,500+ icons, so it adds a bit to your install size. In practice this hasn’t been an issue — the SVGs are tiny and only the ones you use end up in your HTML.
Source and installation instructions are on GitHub.