Guides
116 practical guides on designing and using crypto logos: how icons are drawn, how SVG works, what WCAG asks of icons and wallets, and how to ship all of it.
Icon design
Grids, keylines and turning brand logos into icons that hold up at 16 px.
- Auditing an icon set for consistency6 minA practical consistency audit for a large logo library, from viewBox, padding and color to naming and missing styles, with fixes made at the source.
- Branded, mono and background: three icon styles and when to use each6 minLearn what branded, mono and background icon styles are, where each works best in crypto interfaces, and how to mix them in one product without clutter.
- Circle or square? Container shapes for token icons6 minWhy token icons are round while wallet and exchange icons are rounded squares, and how to mix both in one list or mask logos into a shared container.
- Crypto icon design: the basics6 minLearn what separates a good token icon from a shrunken logo, from silhouette and small-size legibility to the three jobs an icon does in a product.
- Designing a favicon for a crypto project5 minHow to design a mark that reads at 16px in light and dark tab bars, which favicon files to ship with SVG, ICO and apple-touch-icon, and how to test them.
- Designing logos that work on dark backgrounds6 minWhy black marks and deep brand colors vanish in dark interfaces, which fixes work, and how to test a whole logo set against your dark surface.
- Designing token icons that survive at 16px5 minLearn what happens to detail, thin strokes and text when a token icon renders at 16px, which minimum sizes to aim for, and how to test at 1x and 2x.
- Designing token pair icons for DeFi pools6 minHow to build overlapping pair icons for liquidity pools, with the right overlap, a separating ring, a sensible token order, and legibility at small sizes.
- How crypto brands use color, and what it means for icons5 minLearn common color patterns in token and chain logos, the UI problems they cause, like look-alike neighbors and dark marks on dark themes, and the fixes.
- How to make a mono version of a colorful logo5 minLearn to turn a multi-color crypto logo into a clean single-color version with merged shapes, knockouts and gaps, and to test it on light and dark.
- Keylines explained: circles, squares and safe areas5 minLearn how a keyline template works, what its safe area, circle, square and rectangles are for, and how to make round coins and square marks look equal.
- Naming conventions for large icon libraries5 minHow to name files, keys and components for thousands of crypto logos, covering tickers versus ids, collisions, case, category prefixes and search aliases.
- Network badges: showing which chain a token lives on6 minHow to design the token icon with a small chain badge, from size ratios and the cutout ring to deciding when a badge is worth showing at all.
- Optical balance: making a circle and a square look the same size5 minLearn why a circle looks smaller than a same-width square, how overshoot fixes it, and how to balance round coins beside square wallet and exchange marks.
- Pixel snapping: keeping icons crisp on low-density screens6 minLearn how anti-aliasing blurs icon edges that fall between pixels, how to align edges and strokes to the pixel grid, and why it still matters at 16px.
- Simplifying a complex crypto logo into an icon6 minFollow a step-by-step process for reducing a detailed brand logo to a clear icon, and learn what you may and may not change in a third-party mark.
- Stroke weight consistency across an icon set5 minLearn why logos from different brands look uneven side by side, how to even out their visual weight without redrawing them, and where to stop.
- Ticker or name? Labeling token icons5 minWhen to label a token icon with its ticker or its full name, why tickers are ambiguous, how networks differ from tokens, and how to fit labels in grids.
- Turning exchange wordmarks into compact icons5 minHow to turn an exchange wordmark into a square icon that reads at 24px, using the official symbol, a cropped letter, a monogram or a wider slot.
- What makes a good wallet icon6 minWhere wallet icons appear, from connect modals to extension toolbars and home screens, what makes one hold up, and which files wallet teams should ship.
- When a dark logo needs a light tile6 minHow to detect logos that disappear on a dark surface, style the light tile you place behind them, keep tiles consistent, and choose a tile over recoloring.
- Why icons are drawn on a 24 × 24 grid5 minLearn where the 24 pixel icon grid comes from, how it scales to 16, 20, 32 and 48 px, and when a 20 or 32 unit grid is the better place to start.
Using crypto logos
Getting logos into Figma, code, slides, email and print at the right size.
- A size cheat sheet for crypto icons5 minCommon pixel sizes for crypto icons in interfaces, favicons, home screen and PWA icons, with notes on device pixel ratio and touch target sizes.
- Chain logos in network switchers5 minUse chain logos in network selectors and badges, pair them with names, tell testnets apart from mainnets that share a logo, and handle unknown chains.
- Converting SVG to PNG at the right size5 minWork out the pixel sizes you need for 1x, 2x and 3x screens, render SVG logos to PNG with transparent backgrounds, and check the edges before you ship.
- Crypto logos in emails: what actually renders5 minWhy SVG logos fail in many email clients, how to use 2x PNGs with width and height attributes, and how to handle dark mode and blocked images.
- currentColor: SVG icons that follow your text color5 minHow fill set to currentColor makes a mono SVG icon follow the CSS text color through hover, focus and dark mode, and why it only works for inline SVG.
- Exchange logos on price and market pages5 minLay out exchange logos in market tables with consistent sizes and alignment, separate centralized exchanges from DEXs, and avoid implying an endorsement.
- Fallback icons for tokens without a logo6 minBuild fallback icons for tokens with no logo, from neutral initials to address-based patterns, handle broken image URLs and flag unverified tokens.
- How to download a crypto logo as SVG5 minWhere to find crypto logos as SVG, how to tell a real vector from a bitmap wrapped in an SVG file, and how to pick the right style and size.
- Preparing crypto logos for print5 minTurn SVG crypto logos into print-ready files, see why screen colors shift in CMYK, pick versions for small sizes and check brand guidelines.
- Recoloring a single-color SVG with CSS mask5 minUse mask-image and background-color to paint a mono SVG icon in any color straight from a URL, with prefixes, sizing, browser support and accessibility.
- Showing token logos in a wallet interface6 minChoose token logo sizes and styles for wallet balances, send, swap and activity screens, and handle unknown and spam tokens without cluttering the list.
- Sizing token icons in lists, tables and inputs5 minMatch token icon sizes to text and row height, align icons with labels and numbers, and keep amount columns steady with tabular figures.
- Supporting dark mode with crypto logos5 minKeep crypto logos readable in light and dark themes with per-theme files, mono versions and light tiles, plus the CSS and a way to test both.
- Three ways to put an SVG icon in HTML5 minCompare the img tag, inline svg and CSS backgrounds or masks for SVG icons, with code, and see how each handles caching, styling, accessibility and IDs.
- Token lists and logoURI: where wallets get token logos5 minHow the token list standard and its logoURI field supply token logos to wallets, how to resolve IPFS links, and how to cache and validate remote images.
- Using crypto logos in slides and documents5 minGet crypto logos into Keynote, PowerPoint and Google Slides sharply, size them evenly, build tidy logo walls and keep them crisp in exported PDFs.
- Using SVG crypto icons in Figma5 minBring SVG crypto logos into Figma as editable vectors, build a component with branded, mono and background variants, recolor mono icons and export cleanly.
- Using SVG icons in React without a library5 minUse SVG logo files in React with plain img tags or hand-made components, add size and color props, and keep gradient IDs unique with useId.
SVG
How the format works, and how to keep icon files small, safe and sharp.
- Editing an SVG by hand: a short tour5 minA walk through an icon file in a text editor, from the root element to paths and attributes, plus small edits you can safely make without a design tool.
- fill-rule: nonzero vs evenodd5 minHow nonzero and evenodd decide which parts of a path get filled, why holes in logos vanish in some tools, and how to make icons render the same everywhere.
- Gradients, masks and clip paths in icon SVGs5 minHow SVG gradients, clip paths and masks work, what gradientUnits changes, and why they break when an icon is resized, recolored or inlined many times.
- How big should an icon SVG be?5 minTypical file sizes for simple and complex logo SVGs, what makes an icon file bloated, and how to set and enforce a size budget for an icon library.
- Inline SVG vs img vs CSS background5 minA side-by-side comparison of inline SVG, img tags and CSS backgrounds for icons, covering caching, styling, scripts, accessibility and performance.
- Is SVG safe? Scripts, sanitizing and uploads5 minWhen an SVG can run code, why the same file is safe in an img tag but risky inline or at its own URL, and how to handle uploads and token logos.
- Making SVGs scale responsively5 minHow to size SVG icons and logos with CSS so they fill containers, follow text size and keep their shape without stretching or shifting the layout.
- Optimizing SVG files without breaking them5 minWhich parts of an exported SVG you can strip safely, which ones you must keep, which edits look harmless but are not, and how to verify the result.
- Strokes or fills? Outlining icons for production5 minStroke-based versus fill-based SVG icons, why logo sets outline their strokes, and what non-scaling-stroke does to recoloring and scaling.
- SVG favicons: support, dark mode and fallbacks5 minHow to ship an SVG favicon with dark mode support, which fallbacks to keep for browsers and home screens, and why favicon updates can take a while to show.
- SVG ID collisions: why gradients disappear when icons repeat5 minWhy inline SVG icons with gradients, clip paths or masks break when they repeat on a page, how to find duplicate IDs, and four ways to fix them.
- SVG paths explained: M, L, C, A and Z6 minHow to read the d attribute of an SVG path, from simple lines to curves and arcs, and why paths exported from design tools look so dense.
- SVG sprites with symbol and use5 minHow to bundle icons into an SVG sprite with symbol and use, style them across the shadow boundary, and decide when a sprite is worth it.
- SVG, PNG or WebP for logos5 minHow to choose between SVG, PNG and WebP for a logo based on where it will be shown, from web apps to email, link previews, app stores and slides.
- SVGO settings that are safe for icons5 minA practical SVGO setup for an icon library that keeps the viewBox, prefixes IDs, picks a sensible precision and runs the same way in every build.
- Understanding the SVG viewBox5 minWhat the four numbers in an SVG viewBox mean, how they interact with width, height and preserveAspectRatio, and how to fix cropped or badly padded icons.
- Using SVG in CSS: data URIs, masks and backgrounds5 minHow to encode SVG for CSS data URIs, when to use background-image versus mask-image, and when a separate SVG file is the better choice for caching.
- What is SVG and why icons use it5 minHow SVG describes shapes as text instead of pixels, how it compares with PNG and WebP, and why that makes it the default format for logos and icons.
Accessibility
WCAG in plain language, applied to icons, wallets and dashboards.
- Accessible price charts6 minHow to make crypto price charts accessible with text summaries, data tables, patterns as well as colors, and tooltips that work without a mouse.
- Accessible SVG: title, role and aria attributes5 minHow to mark up inline SVG icons for screen readers with role img, aria-label, title and aria-hidden, and how to check the result with real screen readers.
- Alt text for logos and token icons5 minHow to write alt text for logos and token icons, when an icon beside visible text needs empty alt, and how to handle linked logos in lists and tables.
- Announcing transaction status to screen readers5 minHow to use role=status, role=alert and aria-live to announce pending, confirmed and failed transactions under WCAG 4.1.3 without flooding users.
- APCA vs WCAG 2 contrast, explained for designers5 minWhat APCA measures, how it differs from the WCAG 2 contrast ratio, why it is not part of WCAG 2 conformance, and how to use both without confusion.
- Color contrast ratio explained6 minHow WCAG contrast ratios are calculated from relative luminance, which thresholds apply to text and icons, what counts as large text, and how to check.
- Dark mode and accessibility5 minHow contrast rules apply in dark themes, why pure black and white can backfire, and how to keep colored text, logos and focus rings visible.
- Decorative or informative? Hiding icons from screen readers5 minA quick test for deciding whether an icon is decorative or informative, how to hide it with alt and aria-hidden, and how to avoid double announcements.
- Designing visible focus styles5 minHow to design focus indicators that meet WCAG 2.4.7, when to use focus-visible, outline versus box-shadow rings, focus contrast, and design system tokens.
- Don't rely on color alone in crypto interfaces5 minHow WCAG 1.4.1 applies to red and green price changes, chart lines, status dots and form errors, and which signs, labels and patterns fix them.
- Focus not obscured: sticky headers and WCAG 2.4.115 minHow sticky headers, banners and bottom sheets hide focused elements, what WCAG 2.4.11 and 2.4.12 require, and fixes such as scroll-padding and inert.
- Icon-only buttons need names6 minHow to name copy, download, close and settings buttons that show only an icon, why tooltips are not labels, and how WCAG 2.5.3 Label in Name applies.
- Keyboard navigation in icon grids6 minHow to make a large icon grid work by keyboard with one tab stop, roving tabindex, arrow keys and Home and End, plus a short React sketch.
- Making token amounts and prices accessible5 minHow to format token amounts, compact numbers, tickers and price changes so they read well aloud, and how to handle live prices without flooding users.
- Making wallet connection modals accessible6 minHow to build a connect-wallet modal with real dialog semantics, managed focus, wallet buttons named by text, and status messages for pending requests.
- Non-text contrast: the WCAG rule for icons (1.4.11)5 minWhat WCAG 1.4.11 asks of icons, controls and focus indicators, what it leaves out such as logos, and how to apply the 3:1 ratio to icon buttons.
- Respecting prefers-reduced-motion6 minHow to read the prefers-reduced-motion setting, which animations to cut or replace, and what WCAG 2.3.3 and 2.2.2 ask of moving content.
- Screen readers and long crypto addresses5 minHow screen readers handle 0x and Base58 addresses, how to give truncated addresses a usable name, and how to label copy buttons and ENS names.
- Target size: how big should clickable icons be?5 minWhat WCAG 2.5.8 and 2.5.5 require for target size, how the 24px spacing exception works, and how to size copy buttons, icon buttons and grid cells.
- Tools for testing accessibility6 minWhat automated checkers catch and miss, how to test with a keyboard and a screen reader, and which contrast and zoom checks to add to each release.
- WCAG levels A, AA and AAA explained6 minWhat the WCAG conformance levels A, AA and AAA mean, why AA is the usual target, which criteria sit at each level, and how page conformance works.
- What changed in WCAG 2.26 minThe nine success criteria WCAG 2.2 added, their levels, why 4.1.1 Parsing was removed, and what each change means for wallets, swaps and dApps.
- What is WCAG?5 minAn introduction to WCAG covering who publishes it, how versions 2.0, 2.1 and 2.2 differ, the four principles, and why it matters for crypto products.
Web3 UX
Wallet connections, addresses, fees and transactions people can follow.
- Designing a token selector5 minHow to build a token selector with search by name, ticker and address, popular tokens first, balances, chain badges and safe imports for unknown tokens.
- Designing crypto dashboards that stay readable5 minHow to keep a crypto dashboard readable with a clear hierarchy, tabular numbers, color used only for meaning, sensible density and logos as scanning aids.
- Designing for many chains5 minHow to show balances across many chains, use chain logos and badges, decide when to group or split the same asset, and signal when a bridge is needed.
- Designing the connect wallet flow5 minWhen to ask for a wallet connection, how to list and label wallets, EIP-6963 discovery, mobile deep links and QR codes, and remembering the last wallet.
- Displaying wallet addresses: truncation, names and copy5 minHow to truncate wallet addresses safely, keep EIP-55 checksum casing, show ENS names and avatars, build copy buttons, and limit address poisoning risk.
- Empty states in wallets and dashboards5 minWhat an empty balance, empty activity feed or empty NFT tab should explain and offer, how to tell empty from loading, and how to avoid dead ends.
- Fake tokens and spoofed logos: designing for safety5 minWhy a token logo proves nothing, how scam tokens copy names and tickers, and how to use contract addresses, verified lists and warnings to protect people.
- Formatting token amounts and decimals5 minHow to turn raw token integers into readable amounts, pick decimals and significant digits, format per locale, add fiat values and never hide a balance.
- Making signature requests readable5 minWhy raw signature prompts confuse people and how EIP-712 typed data, Sign-In with Ethereum and clear explanations before the request make signing readable.
- Mobile wallet UI patterns5 minPractical mobile wallet patterns for bottom sheets, thumb reach, touch targets, biometric confirmation, QR scanning and token rows that fit small screens.
- Network switching without confusion5 minHow to detect when a wallet is on the wrong network, ask it to switch or add a chain, show the current network clearly, and keep testnets obvious.
- NFT images vs token logos5 minWhy token logos and NFT images do different jobs, and how to handle aspect ratios, cropping, loading and layout so the two never get confused in a wallet.
- Onboarding people who are new to crypto5 minHow to introduce wallets, seed phrases and fees to newcomers with progressive disclosure, calm explanations, sensible defaults and room to explore first.
- Pending, confirmed, failed: transaction state design5 minThe full transaction lifecycle from signature request to confirmed, failed or replaced, what to show at each step, explorer links and how to recover.
- Showing gas fees people understand5 minHow to show network fees in local currency and native token, present estimates and ranges, offer speed options, handle spikes and explain fees plainly.
- Trust signals in web3 interfaces5 minWhat builds trust in a web3 interface and what erodes it, from checkable contract addresses and linked audits to honest fees and readable signatures.
- Web3 UX: where most dApps lose people5 minThe moments where people give up on a dApp, from wallet prompts and jargon to signatures, fees and waiting, and how to make each one easier.
- Writing error messages for dApps5 minHow to turn raw RPC and wallet errors into messages that say what happened, why it happened and what to do next, with before and after examples.
Brands and licensing
Trademarks, licenses and credit, in general terms. Not legal advice.
- Can you modify a brand's logo?5 minWhich logo changes are routine for icons, which ones brand guidelines usually forbid, and how to check that an adapted logo stays faithful.
- Crypto logos and trademarks: the basics6 minLearn what a trademark protects, how referring to a crypto brand differs from borrowing it, and why an icon set license never covers the brand itself.
- How to credit an icon set5 minWhere to credit an icon set in websites, apps, repositories and design files, what the credit should say, and how to word it after modifying icons.
- Open source icon licenses compared6 minWhat MIT, ISC, Apache 2.0, CC BY 4.0, CC0 and the SIL Open Font License each require for icon sets, and why none of them grants trademark rights.
- Partner and integration logo walls6 minHow to build an even partner logo grid by normalizing size and weight, choosing mono or color, spacing cells, linking logos and keeping claims true.
- Press kits and brand guidelines: where to find official logos5 minWhere crypto projects publish official logo files, what their brand guidelines usually contain, and how to check an icon library version against them.
- The MIT license explained for designers5 minA clause by clause reading of the MIT license for designers, covering what it lets you do with icons, its one condition, and what it leaves out.
- Using third-party crypto logos in marketing5 minHow to show supported chains, wallets and partners in marketing without implying endorsement, while following press kit rules and asking before ads.
Performance
Serving, loading, searching and copying thousands of icons quickly.
- Caching SVG files with HTTP headers4 minHow to cache SVG icon files with Cache-Control, immutable and stale-while-revalidate, content-hashed file names, the right content type and a CDN.
- Client-side search for icon libraries5 minHow to search a few thousand icons in the browser with ranked exact, prefix and substring matches, aliases, responsive typing and a URL kept in sync.
- Copy to clipboard: browser rules and pitfalls5 minHow the async Clipboard API works, why copies fail on plain http or after an await in Safari, which fallbacks still work, and how to confirm a copy.
- Icon fonts vs SVG icons5 minWhy icon fonts gave way to SVG, covering accessibility, color and rendering problems, where icon fonts still make sense, and how to migrate step by step.
- Infinite scroll vs pagination for galleries5 minInfinite scroll, pagination or a show more button for icon galleries, compared on findability, footer access, keyboard users and scroll restoration.
- Lazy loading icons5 minHow to lazy load icons with native attributes and IntersectionObserver, reserve space to avoid layout shift, and decide which icons to load right away.
- Rendering thousands of icons in one page5 minHow to keep a page with thousands of logos fast, covering DOM size, image decoding, paging versus virtualization, content-visibility and lazy loading.
- Triggering file downloads in the browser5 minHow to trigger downloads with Blob and object URLs and the download attribute, name files clearly, revoke URLs and generate SVG files on the fly.
- Why static generation suits icon libraries6 minWhy pre-rendering every icon page at build time suits icon libraries, how to manage build time for thousands of pages, and how to write their sitemaps.