Free for personal use · 87 icons

Yokai Icons

A neon Japanese icon pack for web and mobile apps

87 neon UI icons themed on Japanese folklore, free for personal projects. Recolour them live, copy each one as SVG, React, Vue, Flutter, React Native or Android XML, and download an AI skill that draws more in the same style.

Try the icons Download the AI skill

87
icons: 8
copy formats: 6
categories: Free
for personal projects

Try it in your colours

Set the two colours, choose what Copy should give you, then copy or download any icon.

Copy as

Glow is a web effect (an SVG blur filter) and is included in web formats while it is on.

Home

Torii

shrine gate

yokai-torii.svgSVG

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><defs><filter id="glow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.6" result="b"/><feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><g stroke="#22d3ee" filter="url(#glow)"><path d="M4 13 Q24 8 44 13"/><path d="M8 18 H40"/><path d="M13 13 V43"/><path d="M35 13 V43"/></g><g stroke="#f472b6" filter="url(#glow)"><path d="M21 18 V25 H27 V18"/></g></svg>

How the set is built

One grid

48 x 48, one 2.2 stroke, round caps. A single family at any size.

Two colours

Main draws the silhouette, accent draws the character.

Function first

Each icon reads as its job before it reads as folklore.

One source

Every format is generated from the same path data.

Web glow, native glow

The neon glow is a web effect. On the web it is a real SVG blur filter. Mobile renderers do not draw SVG filters the same way, so mobile formats ship the flat two-colour icon and each platform adds glow with its own blur.

Web

SVG · React · Vue · Svelte · CSS

Glow is built in and follows the toggle. Components take size, colour and glow props.

Mobile

Flutter · React Native · Android XML

Flat icons in your two colours, with an optional native glow snippet for each platform.

Make your own with AI

The skill file teaches Claude Code or Cursor the grid, the stroke rules, the colour roles and the motif for all 87 icons, so new ones match this set. Drop it in a skills/folder and ask for what you need, for example “a koi fish icon for Favourites” or “recolour the set to our brand purple”.

Download SKILL.md

Questions

Is it really free?: Yes, for personal projects. All 87 icons are free to use in personal, non-commercial work. Commercial use is not covered by this licence. If you use the icons, please credit Daksh Nauni with a link to daksh.io.
Can I resell or redistribute the icons?: No. Using them inside your own personal app or website is what they are for.
Which frameworks can I copy the icons for?: Pick a format once at the top of the grid and every Copy button follows it. Web: SVG, React, Vue, Svelte, CSS. Mobile: Flutter, React Native, Android XML. Download all gives you a zip in the same format.
Does the glow work on mobile?: The glow is a web effect, an SVG blur filter, so it ships in the web formats only. Mobile formats give you the flat two-colour icon, plus an optional snippet that adds glow with the platform's own blur: ImageFiltered in Flutter, Modifier.blur in Jetpack Compose (Android 12 and newer) and the built-in filter in react-native-svg.