Liniqo / Blog
The Liniqo blog
Practical guides for designers and developers who put illustrations into real products: where they help, how to ship them in code, and how to keep a whole app looking like one piece.
Guides · 4 min readInteractive illustrations: what they are and when to use themStatic, animated or interactive: what the difference is, which interactions work on the web, and where they earn their place.
Development · 4 min readLottie vs Rive vs interactive SVG: which should you use on a website?How Lottie, Rive, CSS, interactive SVG and WebGL differ, and a simple way to pick one for your page.
Design · 3 min readHow to build an interactive hero section that stays fastLayout, what the visual should show, how to load it and what to do on phones, with a copy-paste example.
Development · 4 min readHow to make an SVG react to the mouse cursorPointer events, SVG coordinates, smoothing, touch and reduced motion: the whole technique in plain JavaScript.
UX patterns · 3 min readHover effects on mobile: what happens on touch screens and how to design for itWhat browsers do with hover on touch screens, the media queries that detect it, and design rules that work on both.
UX patterns · 3 min readAccessible interactive illustrations: reduced motion, screen readers and WCAGThe WCAG criteria that apply, reduced motion in CSS and JavaScript, labels, contrast and keyboard users.
Development · 3 min readInteractive graphics without slowing your site: a performance checklistLoad late, reserve space, sleep off screen and measure: a short checklist with code.
Design · 3 min readHow to embed interactive illustrations in Framer, Webflow and WordPressWhere to paste the snippet in each builder, how to size it, and what to check when nothing shows.
Development · 3 min readInteractive illustrations in React and Next.jsLoad the script once, wrap the figure in a component, theme it from props and avoid hydration surprises.
UX patterns · 3 min readInteractive empty states and onboarding: small moments that respondWhere a responsive illustration helps a new user, how to match it to the screen, and what to measure.
Roundups · 4 min read7 best isometric illustration libraries in 2026, free and paidSeven isometric libraries compared on style, price, licence and formats, and how to pick one that keeps your product consistent.
Roundups · 4 min read6 best hairline illustration libraries for UI/UX design in 2026What hairline illustration is, why it suits product UI, and six line-style libraries compared on price and licence.
Guides · 3 min readIllustrations for websites: how to choose them and use them wellWhere illustrations help a website, which style to pick, formats, sizes, speed and licences.
Guides · 3 min readGraphics for websites: 7 types and when to use eachIcons, illustrations, photos, 3D, patterns, charts and motion: what each is for, and the right format.
Free resources · 3 min read308 free isometric illustrations for commercial use308 free isometric SVGs for commercial and client work, no attribution: what is included and how to use them.
Guides · 3 min readIsometric illustration styles: hairline, flat, gradient and 3D comparedSame angle, four looks: hairline, flat, gradient and 3D isometric styles compared.
Design · 3 min readHow to use isometric illustrations in Figma, Framer and WebflowImport, recolour and ship SVG isometric illustrations in Figma, Framer and Webflow.
Illustration packs · 3 min readSaaS illustrations for dashboards, onboarding and landing pagesDashboards, empty states, onboarding and pricing: SaaS illustrations in one isometric style.
Illustration packs · 3 min readFintech illustrations for payments, banking and crypto productsWallets, transfers, credit, loans and crypto: fintech illustrations that feel trustworthy.
Illustration packs · 3 min readAI illustrations for LLM, agent and machine learning productsAgents, RAG, embeddings and GPUs: AI illustrations that go beyond the glowing brain.
Illustration packs · 3 min readHealthcare illustrations for medical apps, clinics and health websitesTelehealth, devices and medicines: calm medical illustrations for health products.
Illustration packs · 3 min readE-commerce illustrations for checkout, carts and online storesCheckout, tracking, wishlists and returns: illustrations for every store moment.
Design · 5 min readHairline illustrations for UI/UX design: the complete guideStroke weight, sizing, colour, dark mode and placement: how to use thin-line illustrations so they feel part of the interface.
AI tools · 5 min readHow to make UI/UX design more polished with AIAI builds screens fast but they look generic. Set the rules, fill the gaps and review like a designer, with prompts you can copy.
Guides · 4 min readWhat is isometric illustration? A practical guide for product teamsHow the 30-degree grid works, why software products love it, and how to keep an isometric style consistent.
UX patterns · 4 min readEmpty state illustrations: 8 patterns that make an app feel finishedThe anatomy of a good empty state, eight common types with copy, and how big the illustration should be.
UX patterns · 3 min readHow to use illustrations in SaaS onboardingWelcome screens, checklists, tours and success moments: where pictures help a new user and where they get in the way.
Development · 3 min readHow to add SVG illustrations to React and Next.jsImage tag, inline SVG, SVGR or a shadcn registry: code for each, and which one lets your theme recolour the drawing.
Development · 3 min readDark mode illustrations: how to make SVGs work in both themesSeparate files, the picture element, or CSS variables: three fixes for illustrations that glow or disappear in a dark theme.
Development · 3 min readHow to recolour SVG illustrations to match your brandFigma, the file itself, or CSS variables: how to make an illustration look like it was drawn for your brand.
Licensing · 3 min readIllustration licences explained: commercial, client and SaaS useCommercial use, attribution, client work, templates and AI tools: what illustration licence terms actually mean.
Design · 3 min readHow to use illustrations on a SaaS landing page without looking genericHero, features, how-it-works and pricing: where pictures help a landing page, and how to keep them specific.
Development · 3 min readAnimated SVG illustrations: draw-on effects with plain CSSThe stroke-dasharray trick, staggered timing, scroll triggers and reduced motion, in a few lines of CSS.
AI tools · 3 min readHow to add illustrations with Claude, Cursor and LovableConnect an illustration library to Claude, Cursor or Lovable over MCP, then ask for pictures in plain words.
