今日已更新 166 条资讯 | 累计 20138 条内容
关于我们

标签:#svg

找到 3 篇相关文章

AI 资讯

Stop Picking Dashboard Icons by Keyword

Most dashboard icon problems do not come from bad icons. They come from good icons used with the wrong meaning. You search for users , pick a clean SVG icon, place it in the sidebar, and move on. Then later you need another icon for: Customers Team members Account owners Permissions Audiences Invited users Admins Suddenly, the same “user” metaphor has to carry too many meanings. That is where SaaS dashboards often start to feel noisy. Not because the icons are ugly. Not because the SVGs are technically wrong. Not because the design system is broken. Because the icon choices were made by keyword instead of meaning. Keyword search is only the first step Most developers choose icons like this: Need an icon for billing? Search billing . Need an icon for users? Search users . Need an icon for analytics? Search chart . Need an icon for settings? Search settings . That works for finding candidates. But it does not solve the real UI problem. A keyword tells you what the icon is related to. It does not tell you what the icon means in your product. For example, search for settings . You might find: A gear Sliders A wrench Control knobs A preferences panel A tune icon They all match the keyword. But they do not say the same thing. A gear usually means global settings. Sliders suggest adjustable preferences or filters. A wrench feels technical or maintenance-oriented. Control knobs suggest fine tuning. A panel icon may suggest a configuration screen. The same keyword can point to different mental models. And in a dashboard, mental models matter more than decorative accuracy. SaaS dashboards are meaning-dense interfaces A marketing website can sometimes get away with decorative icons. A SaaS dashboard cannot. Dashboards are dense. They contain navigation, actions, status indicators, tables, filters, empty states, permissions, billing screens, integrations, reports, and settings. Users do not look at each icon in isolation. They scan. They compare. They move quickly. They expect

2026-06-18 原文 →
工具

Creating Memorable Web Experiences: A Modern CSS Toolkit

There are many ways to create memorable experiences. Sometimes it's as simple as a form that completes smoothly. But here I'm interested in sharing techniques I reach for when I want a site to feel alive and be remembered. Creating Memorable Web Experiences: A Modern CSS Toolkit originally handwritten and published with love on CSS-Tricks . You should really get the newsletter as well.

2026-06-10 原文 →
AI 资讯

SVG Icon Systems in 2025 — Everything You Need to Know

Every web app needs icons. How you manage them at scale — that's where most teams make mistakes. This is the complete guide to building an SVG icon system that doesn't fall apart as your app grows. Why SVG (Not Icon Fonts or PNG) Icon fonts (FontAwesome, etc.) are the legacy approach. The problems: One broken font file breaks all icons Accessibility is terrible (screen readers read the unicode character) Crispy rendering requires specific font-smoothing hacks No multi-color support PNG icons are dead for UI work. Blurry on Retina, can't be styled with CSS, fixed file per size. SVG wins: Infinitely scalable, pixel-perfect on any screen Styleable with CSS ( currentColor , fill, stroke) Accessible with proper ARIA labels Can animate with CSS or SMIL Single format handles all sizes Where to Get Free SVG Icons IconKing SVG Library — 254+ free SVG icons in flat and outline styles. Covers UI, social media, food, objects, and more. Downloadable as individual SVG, AI, or PNG files. No account required. What sets IconKing apart: many icons have matching animated Lottie versions in the Lottie library — useful when you want an animated hover state that matches your static icon. Other solid free sources: Heroicons (heroicons.com) — MIT, Tailwind-made, 292 icons Phosphor Icons (phosphoricons.com) — MIT, 1,248 icons, 6 weights Lucide (lucide.dev) — ISC, 1,400+ icons, React/Vue packages Tabler Icons (tabler.io/icons) — MIT, 5,000+ icons Method 1: Inline SVG Best for: small number of icons, need CSS styling <!-- Inline the SVG directly --> <button aria-label= "Close" > <svg width= "20" height= "20" viewBox= "0 0 24 24" fill= "none" stroke= "currentColor" stroke-width= "2" > <line x1= "18" y1= "6" x2= "6" y2= "18" /> <line x1= "6" y1= "6" x2= "18" y2= "18" /> </svg> </button> The stroke="currentColor" means the icon inherits its color from the parent element's CSS color property — trivial theming. Method 2: SVG Sprite Best for: many icons, better performance (single HTTP request) Bui

2026-05-31 原文 →