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. Square or rounded, applied to all 170 icons at once. The default is square.
- 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" viewBox="0 0 32 32" width="24" height="24" fill="none"
stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="miter">
<path d="M16 6v20"/>
<path d="M6 16h20"/>
</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.
Using an icon from a CDN
Every icon is served by jsDelivr from the GitHub repository, at
https://cdn.jsdelivr.net/gh/evanpizzolato/quick-start-icons/src/<name>.svg. There is no account, no API key and no
package to install.
<img src="https://cdn.jsdelivr.net/gh/evanpizzolato/quick-start-icons/src/bell.svg" width="24" height="24" alt="Notifications">
The CDN file is the authored source: rounded corners, a stroke weight of 2, and no
width or height. An SVG loaded through <img> cannot inherit the CSS
color of the page, so it draws in black. To color it, paste the markup
inline, or use the URL as a CSS mask-image over a colored background.
Each icon page, such as the bell icon, shows its own CDN URL.
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 | Square or rounded, default square, both derived from the same source |
|---|
| Color | currentColor, inherits the CSS color of its parent |
|---|
| Categories | 12, listed at the bottom of every page |
|---|
| CDN | jsDelivr, at https://cdn.jsdelivr.net/gh/evanpizzolato/quick-start-icons/src/<name>.svg |
|---|
| 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 in 12 categories: arrows, actions, editing and text, layout and settings, files and folders, communication, media, people and reactions, development, status and security, business and charts and time and weather. Each one is a single SVG file drawn on the same 32 by 32 canvas.
Can I change the stroke weight?
Yes, the stroke weight slider sets every icon from 1 to 3 in steps of 0.25, and the default is 1.25. The weight showing on the page 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?
The corners toggle switches every icon between square and rounded corners, and square is the default. 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.
Do I need to install a package?
No, there is no npm package, no icon font and no runtime to install. 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.
Can I load the icons from a CDN?
Yes, jsDelivr serves every icon at https://cdn.jsdelivr.net/gh/evanpizzolato/quick-start-icons/src/<name>.svg, with no account and no install. Replace the name with the icon's file name, such as bell or gear. The CDN file is the authored source, with rounded corners and a stroke weight of 2, and each icon page shows its own CDN URL.
Does every icon have its own page?
Yes, every icon has a page at icons.evanpizzolato.com/icons/<name>/ with the SVG code, the CDN URL, the words it is also found under, and related icons. The same page is available as markdown at /icons/<name>.md.
How do I change the color of an icon?
Set the CSS color property on the icon or on its parent, because every icon is stroked with currentColor. It inherits color the same way text does, so an icon follows 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 gives the SVG an intrinsic size, because a pasted SVG without one renders 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 one zip file, with your current stroke weight and corner setting applied to every icon. 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 lets one stroke weight control 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.