How to Use SVG in Jekyll
Embed and reuse SVG graphics in Jekyll using includes, Liquid templating, and an organized icon asset structure.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Embedding SVG with Jekyll Includes
Jekyll's include tag can directly insert the contents of an SVG file stored in the _includes folder, rendering it as inline markup in the final HTML. This allows CSS styling of fill and stroke properties, unlike a referenced img tag.
- Place SVG files in _includes for direct inline embedding
- {% include icon.svg %} inserts the file's raw markup inline
- Inline SVG supports CSS styling that img-tag SVG does not
Organizing an Icon System in Jekyll
For sites with many icons, create a dedicated _includes/icons folder and build a small Liquid-based include that accepts an icon name parameter, keeping icon usage consistent and DRY across layouts and pages.
- Dedicated icons folder keeps SVG assets organized and findable
- Parameterized include reduces repetitive icon-embedding code
- Works well combined with Jekyll collections for icon metadata
Frequently Asked Questions
Can I pass parameters to an included SVG icon in Jekyll?
Yes — Liquid includes support parameters, so you can build an include that takes an icon name and size, then outputs the matching SVG with appropriate attributes.
Should I optimize SVG files before adding them to a Jekyll site?
Yes — run files through SVGO first since Jekyll doesn't optimize SVG automatically, keeping inlined icon markup as lightweight as possible.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG