YuktaiDocs v5.3.12

Icon studio

Icon studio

Every YuktAI icon, read live from the YuktAI script, so new icons appear here as soon as a release adds them. Type any size, pick a colour and style, then copy the code or download a PNG or SVG.

Original designs: every YuktAI icon is drawn for YuktAI and free to use under GPL-3.0. Checked against Lucide (2,176 icons) and Feather (287 icons): no icon, and no single line, is the same. In 5.3.11, 13 icons (plus, minus, reset, search, sortUp, sortDown, left, right, first, last, undo, redo, pen) get their original YuktAI shapes, and the palette icon is clearer.

Style
Colour
Size (any number of pixels)

8 to 1024 px. The tiles show up to 64 px; the preview, code and downloads use your exact size.

accessibility

React / Next.js
Plain HTML
Comma-separated, 8–1024. Handy for favicons and app icons. Your browser may ask to allow several downloads.

Download all icons

Uses the style, colour, shape, size and line weight you chose above.

Which icons
Sheet background
Sheet options

The picture shows icons at your size up to 128 px; ZIP files use your exact size. Everything is made in your browser, offline too.

Loading icons…

    Use an icon

    React / Next.js

    1. npm install @yuktishaalaa/yuktai
    2. Copy the React / Next.js line from the studio. Icon components work in Server Components too.
    app/page.tsx
    import { EyeOffIcon } from "@yuktishaalaa/yuktai/icons"

<EyeOffIcon size={40} color="#084d31" label="Hide password" />
<EyeOffIcon size={40} color="#084d31" variant="filled" shape="circle" />

    Plain HTML

    1. Add the YuktAI script once, before </body>.
    2. Copy the Plain HTML code from the studio; it fills a placeholder with the SVG.
    index.html
    <span id="my-icon"></span>
<script>
  document.getElementById("my-icon").innerHTML =
    yuktai.icon("eyeOff", { size: 40, color: "#084d31", strokeWidth: 2.5, label: "Hide password" })
</script>

    No script? Use Copy SVG and paste it into your HTML, or use the downloaded file in an <img> with a meaningful alt.

    Add label when the icon means something on its own; leave it out when the text next to it says the same, so screen readers don't repeat it. Icons need 3:1 contrast with their background (WCAG 1.4.11); the studio checks it for you.