Arcticons
arcticons · 15,322 icons · by Donnnno · CC-BY-SA-4.0 · single-color · 48px grid · Updated
Arcticons is a free, open source icon set with 15,322 SVG icons by Donnnno, released under the CC BY-SA 4.0 license. The icons are single-color: they follow your text color (currentColor) and can be recolored with CSS. They are designed on a 48px grid and scale cleanly as SVG.
Arcticons design specs
- outline
- monochrome
- rounded
The drawing rules of this set, measured from its SVG files. Use them to design new icons that match it.
| Canvas | 48 × 48 |
|---|---|
| viewBox | 0 0 48 48 |
| Drawing area | 40 × 40, 4 padding |
| Drawing style | Outline (strokes) |
| Stroke width | 1 |
| Line ends | Round |
| Line joins | Round |
| Corner radius | 2 |
| Colors | One color (currentColor), recolorable with CSS |
| Coordinates | Up to 3 decimals |
| Straight lines | 57% horizontal or vertical, 9% at 45° |
| Curves | 50% of drawing commands |
| Symmetry | 31% of icons are left-right symmetric |
| Elements per icon | 2.9 |
| Drawing commands per icon | 23 |
Measured from 62 icons of this set.
AI icon generation
Not allowed: these are brand logos, and the marks belong to their owners.
About Arcticons
Popular Arcticons include paperlaunch, gravadordevoz, appstract, clipious, productivity and daserste.
Open any icon to copy it as SVG, JSX, Vue, Svelte, Solid, Astro or CSS, or download it as SVG or PNG. Arcticons are released under the CC BY-SA 4.0 license, which allows use in personal and commercial projects as long as you credit the author and share changes to the icons under the same license.
How to use Arcticons
Every icon on this page works in any framework. Examples use arcticons:paperlaunch; open an icon to copy its exact SVG, JSX, Vue, Svelte, Solid, Astro or CSS code. For sizing, color and accessibility tips, read how to use SVG icons.
React
import { Icon } from "@iconify/react";
<Icon icon="arcticons:paperlaunch" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="arcticons:paperlaunch" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="arcticons:paperlaunch" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[arcticons--paperlaunch]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/arcticons -->
<div class="i-arcticons:paperlaunch"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="arcticons:paperlaunch"></iconify-icon>HTML image
<img src="https://iconyz.com/api/public/svg/arcticons/paperlaunch.svg" alt="Paperlaunch icon" width="24" height="24">Arcticons FAQ
Are Arcticons free for commercial use?
Yes. Arcticons are released under the CC BY-SA 4.0 license, which allows use in personal and commercial projects as long as you credit the author and share changes to the icons under the same license.
How many icons are in Arcticons?
Arcticons contains 15,322 icons.
What license do Arcticons use?
Arcticons are licensed under CC BY-SA 4.0. The full license text is available at https://creativecommons.org/licenses/by-sa/4.0/.
Who made Arcticons?
Arcticons are created by Donnnno.
How do I use Arcticons in React?
Install @iconify/react and render <Icon icon="arcticons:paperlaunch" />, or open any icon on this page and copy it as a standalone React component.
What size are Arcticons?
Arcticons are designed on a 48px grid. As SVGs they scale to any size without losing quality.