Guides & Articles

SVG vs PNG: Which Format Should You Use?

Use SVG for website icons, logos, and user interfaces because vector paths stay sharp on every screen size and retina display. Use PNG when you need a fixed-pixel image for email signatures, legacy apps, or social media thumbnails.

How to Animate SVG Icons with CSS

Add a CSS class to your inline SVG element and apply transform or stroke-dasharray keyframes. Using transform: scale() or rotate() with transform-origin: center creates smooth 60fps hover and loading animations without JavaScript.

How to Edit SVG Icons in Figma or Your Browser

Copy the raw SVG code from SVG Nexus and paste it directly onto your Figma canvas to edit vector nodes and fills. You can also open any icon in our browser SVG Editor to change colors, stroke width, and viewBox without installing software.

How to Use SVG Icons in React, Next.js, and Vue

Select the React TSX or Vue 3 tab on any icon page to copy a ready-to-use component. The exported code uses currentColor so your icon automatically matches your Tailwind CSS or CSS text color classes.

Inline SVG versus image tags

Use inline SVG or components when you need hover color changes and CSS animation. Use image tags with width, height, and alt text when you want the icon indexed by image search.

Stop gradient and clip path ID clashes

Multi-color sets often reuse internal IDs such as paint0_linear. If two icons share an ID on one page, the wrong gradient is drawn. SVG Nexus scopes every internal ID per icon automatically.

Accessible icons and RTL mirroring

Hide decorative icons with aria-hidden and focusable false. Give icon-only buttons a clear aria-label. Flip arrows and chevrons horizontally for right-to-left languages.

Sanitize third-party SVG files

SVG is an XML format, so untrusted files can carry scripts and event handlers. Remove script nodes and serve SVG files with a strict content security policy and nosniff header.