withicons.com

with icons (withicons.com): 750 open-source (MIT) icons, each drawn in 34 styles, in 6 groups: Essentials (line, solid, duo, suite); Product & brand (bento, dock, brutal, bauhaus); 3D & glass (clay, glass, liquid, chrome, soft3d, luxe, skeuo); Playful (kawaii, plush, sticker, gloss, pastel, pixel, retro); Artistic (sketch, engrave, blueprint, anime, gothic, coquette); Holidays (utsav, rangoli, halloween, christmas, lunar, valentine). Workflow: search_icons with what the icon should show ("delete", "throw away", "user settings") -> pick a name -> get_icon(name, style, format) for paste-ready code. Look before you choose: preview_icons(names, styles) returns ONE labelled picture (an SVG sheet) of several icons in several styles, rows = icons, columns = styles, optionally on a dark or brand-colour background; use it to compare styles and pick between candidates instead of guessing. Choosing a style: recommend_styles(for: "what you are making", e.g. "Diwali sale banner", "avatar picker for a kids app", "AI landing page") returns the best styles with packages, snippets, presets and palettes. Best per job: an app or website: line, duo, solid, suite; slides and documents: solid, duo, suite, clay; a saas landing page: bento, soft3d, duo, dock; an ai product: clay, liquid, chrome, glass; something premium: glass, luxe, chrome, dock; something playful: kawaii, plush, sticker, gloss; print or editorial: engrave, sketch, blueprint, bauhaus; a festival or seasonal campaign: rangoli, christmas, halloween, lunar. One style per page or UI region; only line, solid and duo go in 16-24px controls, the others at 32px+. Festivals: icon categories indian-festivals, christmas, lunar-new-year, valentines, halloween plus holiday styles with festival palettes. Avatars: category avatars (people with true-to-life skin-tone and hair palettes: offer several; animals; friendly monsters). Style words in a query pick the style ("cute heart" -> kawaii, "8-bit star" -> pixel, "isometric server" -> soft3d, "claymorphism" -> clay, "manga" -> anime, "toy" or "kids" -> plush). Colours: line, solid, gloss, engrave, sketch draw in one colour (currentColor: set color); the others paint colour roles as CSS variables with defaults (the ink follows currentColor). list_styles gives each style's roles as its icons paint them (duo: c1 = a 20% tone fill (648 of 750 icons), accent = a solid stroke (521 of 750 icons); blueprint: c1 = a solid stroke). Each icon has 20-30 colour palettes picked for it: list_palettes(name, style) shows them; get_icon / export_icon take palette: "<id>" or colors: { c1, c2, ink, ... }. Brand colours: theme: { primary, secondary?, tertiary?, ink? } (hex) puts them on each icon's own parts, largest first, in any style (per_icon on export_icon colours single icons); the hex shows exactly in line, solid, duo, gloss, engrave, blueprint, sketch, sticker, retro, bauhaus, anime, pastel, brutal, shaded in the rest. Animation: animate_icon(name, trigger loop|hover|once|inview|swap, format, style) returns code for the optional @withicons/motion package (loops, hover effects, icon-to-icon swaps); 3D styles (clay, glass, liquid, chrome, soft3d, luxe, skeuo ...) play it in 3D and soft3d returns 3-5 moves per icon. Whole styles as files: https://withicons.com/downloads/with-icons-<style>.zip (every SVG + an offline viewer) and with-icons-all.zip. Files: export_icon(name, style, format) makes files: svg, pdf, png, pptx, docx, favicons, app assets, Lottie, and animated ones for slides and docs: gif (plays in PowerPoint, Keynote, Google Slides, email, chat), apng, animated-svg, pptx-animated (a slide with the moving icon). Set background to the slide colour for GIFs. This hosted server makes PNG, every still format, animated-svg and Lottie itself and returns the files inline (base64 resources named by filename); gif, apng, pptx-animated and pptx-sheet come back as the exact `npx withicons export ...` command to run. Making slides and docs: call recommend_styles({ use: 'slides' }) first, then make the whole set in one call: export_icon({ names: [...], style, format: 'png', size: 512, colors: { ... } }) (one colors set for every icon; the background stays transparent unless you set one); the PNGs come back inline as base64 resources (save each under its filename), a large set in pages (next.cursor). Embed PNG, not SVG (pptxgenjs slide.addImage({ path }) or python-pptx add_picture): a 512 px PNG stays crisp from 0.5 to 3 in on a slide; use size 1024 for larger or printed icons. 'pptx' is a one-slide deck with the icon to copy from, 'pptx-sheet' a deck of one icon in every style for choosing a look, 'pptx-animated' a ready slide with the moving icon: none of them merges into your own deck. Single-colour styles (solid, line: color sets the ink) match a brand hex exactly; gradient and shadow styles (clay, glass, liquid, soft3d, suite ...) shade the colours you give, so they never match a brand colour exactly. Formats: svg, react, vue, svelte, angular, solid, html-class, web-component, data-uri. Packages: @withicons/react|vue|svelte|angular|solid|web|classes|core|static|motion|dynamic (web = <with-icon> element, classes = <i class="with with-home"> CSS icons); every framework package, <with-icon> and the class loader carry every style. Raw files of the newest styles live in companions: @withicons/core-plus, soft3d, holiday (SVG + node data), static-plus (prebuilt SVG, sprites), classes-plus; recommend_styles names the package per style. Names and common aliases both work (e.g. "delete" -> trash).