What Quick Start Icons is
Quick Start Icons is a free, open source set of 170 SVG icons for people
scaffolding a new project. Every icon is drawn as a live stroke on a 32 by 32
canvas, so the stroke weight and the corner style are controls on the page rather
than separate downloads. Copy one icon or download all 170. The license is MIT.
Most icon sets ship their weights as separate files, which means a thin set and a
bold set are two libraries to keep in step. Here the weight is one CSS custom
property that every icon inherits, and the corner toggle reaches the three different
ways a corner is authored in SVG: a rect radius, a stroke line join, and an arc baked
into the path data. Whatever you set is baked into the file you copy.
Using the icons
There is nothing to install. Set the two controls, find the icon, and copy it. The
SVG on your clipboard is a complete file with your settings already applied.
- Set the stroke weight. The slider runs from 1 to 3 in steps of 0.25. The default is 1.25.
- Choose the corners. Rounded or square, applied to all 170 icons at once.
- Find the icon. Type in the search box, or press / from anywhere on the page.
- Copy or download. Copy puts the SVG markup on your clipboard. The download button in the corner of an icon saves a single
.svg. Download all saves the whole set as a zip.
- Paste it. Inline SVG works in HTML, JSX, Vue, Svelte, and Figma. No build step and no package to add.
What a copied icon looks like
Every icon carries its presentation attributes on the root element and nothing on the
children, so one CSS rule can restyle the whole set:
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 32 32" fill="none" stroke="currentColor"
stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round">
<path d="M16 6L16 26"/>
<path d="M6 16L26 16"/>
</svg>
Because the stroke is currentColor, the icon takes the CSS
color of whatever contains it. To recolor one, set color on
its parent. To resize one, change width and height, or drop
them and size it with CSS.
Specifications
Quick Start Icons technical specifications
| Icons | 170 |
|---|
| Format | SVG, one file per icon |
|---|
| Canvas | 32 by 32 viewBox, exported at 24 by 24 |
|---|
| Style | Outline, live strokes, no filled paths |
|---|
| Stroke weight | Adjustable from 1 to 3, default 1.25 |
|---|
| Corners | Rounded or square, both derived from the same source |
|---|
| Color | currentColor, inherits the CSS color of its parent |
|---|
| License | MIT |
|---|
| Dependencies | None. No npm package, no font file, no runtime. |
|---|
| Author | Evan Pizzolato |
|---|
Frequently asked questions
Is Quick Start Icons free for commercial use?
Yes. Quick Start Icons is MIT licensed, so all 170 icons are free to use in commercial products, client work, and paid apps. You can modify them and ship the modified versions. Attribution is appreciated and not required, and there is no paid tier holding icons back.
How many icons are in the set?
There are 170 icons, covering the things a new project needs on day one: navigation and arrows, files and folders, users, media controls, editing, git, charts, weather, and interface furniture. Each one is a single SVG file drawn on the same 32 by 32 canvas.
Can I change the stroke weight?
Yes, on the page, before you copy. The stroke weight slider runs from 1 to 3 in steps of 0.25 and repaints all 170 icons at once. Whatever weight is showing is baked into the file you copy or download, so there is no separate thin or bold set to install.
What does the corners toggle do?
It switches every icon between rounded and square corners. Corners are authored three ways in SVG, as a rect radius, as a stroke line join, and as an arc inside the path data, and the toggle reaches all three. Both states come from the same source file, so the two are always in step.
Do I need to install a package?
No. There is no npm package, no icon font, and no runtime. You copy the SVG markup or download the file, and paste it into your project. That works in HTML, JSX, Vue, Svelte, and Figma without a build step, and it means an icon costs nothing at install time.
How do I change the color of an icon?
Set the CSS color property on the icon or on anything containing it. Every icon is stroked with currentColor rather than a hard coded hex value, so it inherits color the same way text does. That also means an icon follows a dark mode or a theme change without a second copy.
What size are the icons?
Each icon is drawn on a 32 by 32 viewBox and exported with a width and height of 24. The export size is set so the SVG has an intrinsic size; without one, a browser renders a pasted SVG at 300 by 150. Change the width and height, or remove them and size the icon with CSS.
Can I download all the icons at once?
Yes. The Download all button saves the complete set as a zip, with your current stroke weight and corner setting already applied to every file. The archive is written in the browser, so nothing is uploaded and no account or email address is asked for.
Who made Quick Start Icons?
Evan Pizzolato, a product designer, drew and shipped the set. Every icon is authored by hand as a live stroke rather than traced or converted from a filled path, which is what makes one stroke weight control able to drive the whole library.
License
Quick Start Icons is released under the MIT license. You can use the icons in
personal and commercial work, modify them, and ship them inside a product you sell.
Attribution is appreciated and not required. There is no paid tier and no icon held
back from the free set.
Copyright © 2026 Evan Pizzolato.