Skip to content
tileio

12 layers · 5 free

SVG icon packs drawn to one grid

Each pack is one sprite file with a symbol per icon, drawn to the same 24-pixel grid with the same 1.75 px round stroke, so icons from different packs sit together on one page. Colours come from CSS variables instead of fills baked into the paths, with a second colour for the detail that carries the meaning.

Every path carries a draw-on convention: move one custom property from 100 to 0 and the icon strokes itself in, on hover or on first view. Leave it alone and the icons are static.

The 12 layers, in order

  1. Arrows, chevrons, menu, close, search, settings and the rest of an interface's basics; eight use the accent on their action stroke.

  2. Like, comment, share, repost, bookmark, mention and profile: the actions for a feed or a share bar.

  3. Cart, bag, price tag, barcode, receipt, card and wallet for a shop's header, product page and checkout.

  4. Plane, take-off, suitcase, passport, ticket, map pin and compass for bookings and itineraries.

  5. Leaf, recycle, solar panel, wind turbine, EV charger and bicycle for sustainability pages and impact reports.

  6. Code, terminal, git branch, pull request, bug, database, server and API for developer docs and tooling sites.

  7. Bank, charts, a candlestick and currency signs from the dollar to bitcoin.

  8. Heart pulse, stethoscope, pill, syringe, first aid kit and ambulance for clinics and health apps.

  9. Book, graduation cap, pencil, ruler, calculator, flask and atom for schools and course sites.

  10. Cutlery, chef hat, plate, pizza, coffee, wine and cocktail for menus and delivery apps.

  11. Play, pause, skip, rewind, volume, mute and microphone for players and podcast pages.

  12. House, wrench, hammer, paint roller, broom and spray bottle for trades and cleaning services.

Browse the full catalogue: Vectors

Related collections

All collections