Teenyicons
Tiny, minimalist 1px-stroke vector icons designed to fit beautifully in the smallest spaces.
STATS
OVERVIEW
Teenyicons is a minimalist, open-source SVG icon library designed specifically for high-density interfaces, small utility menus, and mobile screen designs. Created with a unified 1px stroke weight on a compact 15x15 pixel grid, these icons remain perfectly sharp and highly legible even when scaled down to tiny sizes.
Every vector inside Teenyicons is meticulously structured to prevent anti-aliasing blur when rendered at small resolutions. The library is balanced cleanly between Outline (linear) and Solid variants. Because of its geometric simplicity, it serves as an excellent companion set for modern minimalist websites, clean dashboard components, or developer portfolio layouts.
Teenyicons is fully open-source under the MIT license. It is distributed via npm ('teenyicons'), standard CDNs, and as standard SVG paths. Since it is extremely lightweight, icons can be directly imported as inline SVG components, used with React wrappers, or loaded using Iconify's API using the 'teenyicons' prefix.
// VERDICTIf you need a highly visual, playful, or organic branding look, Teenyicons may feel too simple. However, for dense developer tools, sidebar layouts, command bars (such as cmd+K menus), or settings grids where space is at an absolute premium, Teenyicons is unmatched in its crisp minimalist layout.
OFFICIAL LICENSE & COMMERCIAL USE
The MIT License is a highly popular, extremely permissive open-source license. Under the MIT License, you are officially allowed to use Teenyicons in any personal, commercial, or corporate software projects completely free of charge. You can modify the icons, distribute them, sell software containing them, and even sublicense them. The only requirement is that you must preserve the original copyright notice and permission notice in all copies of the software.
- Commercial Use Allowed
- Modification Allowed
- Redistribution Allowed
- Sublicensing Allowed
- Must keep copyright notice in source files
- License remains active on copy/use
INSTALLATION
npm install teenyicons
npm install teenyicons // Note: Teenyicons works perfectly with next/image or by embedding SVGs directly into React components to ensure zero client-side bundle bloat.
// Import raw SVG strings or use unplugin-icons with Teenyicons support
// Import SVG source files directly into Svelte templates
<!-- Grab individual SVGs from jsDelivr CDN --> <img src="https://cdn.jsdelivr.net/npm/teenyicons@latest/outline/home.svg" width="15" height="15" />
CODE EXAMPLES
// Using raw SVG markup directly or custom SVG wrapper
export function CheckIcon({ className }) {
return (
<svg className={className} viewBox="0 0 15 15" width="15" height="15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 7.5L6.5 10L11 4.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
);
}// Tailwind integration with fixed 15x15 container alignment
export function MiniStatusBadge() {
return (
<div className="flex items-center gap-1 text-xs text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded-full">
<span className="w-[15px] h-[15px] flex items-center justify-center">
<svg viewBox="0 0 15 15" fill="none" className="w-[15px] h-[15px] stroke-current" strokeWidth="1">
<path d="M4 7.5L6.5 10L11 4.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</span>
<span>Active</span>
</div>
);
}<!-- Import a Teenyicon directly via standard CDN -->
<img src="https://cdn.jsdelivr.net/npm/teenyicons@latest/outline/user.svg"
width="15"
height="15"
alt="User" />