A real project needs twenty icons, not one, and they must look like a family: the same colour, size, shape and shadow. This lesson shows how to style once and export everything together.
Save your style as a preset
Style one icon the way the whole set should look (lesson 3). Then press Save in the Presets row, just before Reset. Your style appears as a chip there, with a small swatch of its colour and shape.
From now on, pick any icon and press the chip: it takes that exact style. You can keep up to 12 presets, such as one for your app and one for a client. Right-click a preset to remove it, or press Delete while it has the keyboard focus. Presets are kept in this browser.
Star your favourites
Press the star next to an icon's name to add it to your favourites. Favourites in the app bar shows how many you have; press it to show only those in the grid, and again to show everything.
Use favourites as a shopping list while you search: star the bell, the chart, the user and the gear as you find them, then come back to the list when it is complete.
Select many at once
Press Select in the heading above the grid. Now pressing an icon picks it, and shows it on the right too. Hold Shift to pick a run of icons in one go. Without Select, hold Ctrl (Cmd on a Mac) while you press an icon to start picking; Esc ends picking. A bar appears under the grid with how many you picked, Select all shown and Clear.
A quick way to export your whole list: show only your favourites, press Select, then Select all shown.
Download in your style
The selection bar has three buttons. The two zips export every icon in the style on the right, so set or pick your preset first.
- SVG .zip: one SVG file per icon, styled.
- PNG .zip: one PNG per icon, styled, at the size chosen under PNG size in the Export tab. Up to 400 icons at a time.
- Sprite: one SVG file with every icon as a
<symbol>. The icons stay plain and take their colour from your CSS (currentColor), which is what you want for a sprite in a web app.
A sprite loads once and lets you use any icon by its set and name, such as lucide-bell:
<svg width="24" height="24"><use href="icons-sprite.svg#lucide-bell"/></svg>The licences come with them
Each zip includes the licence of every set its icons come from. Keep that file with your project, for example in a licenses folder or your third-party notices: that is the main condition of the MIT, ISC and Apache 2.0 licences. No visible credit on your site or app is needed. Material Symbols (Apache 2.0) asks one thing more: an icon you styled is a changed file, so say so beside the licence, for example "icons from Material Symbols, recoloured". The terms say the same.
To read the licences, press the file icon in the app bar. It lists every set with its version, a link to its licence text and its website.
A checklist for an icon set
- One set, or two that share a grid, such as Lucide and Tabler
- One style: outline for everyday icons, filled only for active states
- One preset for colour, background, padding and shadow
- Every icon checked at 16 and 24 pixels
- Styled SVGs or a plain sprite for the web, PNG at twice the size for everything else
- The licence files in your project
That completes the course. You can now find, style, animate and ship icons for any project, one at a time or as a full set.