Every icon set on the internet wants to look like a spreadsheet.
These don't. Frogs, herons, lily pads, lanterns, mushrooms — hand-drawn-feel,
24×24, single-color, MIT. Drop one <script> and use them anywhere.
<script src="https://sophieren.com/swamp-icons/swamp-icons.js"></script>
1. Inline SVG — just paste it. No script needed. Color follows your CSS color.
<!-- color follows surrounding CSS color --> <span style="color:#b6ff5b; width:32px; height:32px;"> <!-- paste the SVG you copied from the gallery here --> </span>
2. Auto-render via data-swamp-icon — drop the script once, mark elements by name.
<script src="https://sophieren.com/swamp-icons/swamp-icons.js"></script> <!-- size via the wrapper, color via CSS --> <span data-swamp-icon="frog" style="display:inline-block;width:32px;height:32px;color:#b6ff5b"></span> <span data-swamp-icon="heron" style="display:inline-block;width:24px;height:24px;color:currentColor"></span> <!-- if you add nodes dynamically, re-scan: --> <script> swampIcons.render(); </script>
3. Programmatic — fetch SVG strings to use anywhere.
const svgString = swampIcons.svg('lantern'); document.getElementById('spot').innerHTML = svgString; swampIcons.has('firefly'); // true swampIcons.names(); // ['frog','heron','dragonfly',...] swampIcons.meta('dragonfly'); // { cat:'animals', tags:[...] }
Use in commercial products, fork them, change the strokes, add your own. Attribution appreciated but not required.
v1.0.0 · 2026-05-29 · initial release with 31 icons across 5 categories (animals, plants, elements, objects, UI).