AVIF to PNG for Web Designers — Logos, Icons, and Transparent Assets

Web designers regularly encounter AVIF files that need to be in PNG format before they can be used in Figma, Sketch, Illustrator, or Photoshop. AVIF is the delivery format of the modern web — but PNG is the working format for design.

This guide covers the specific scenarios designers face: converting downloaded logos, extracting transparent assets from web builds, and preparing AVIF images for design tools and client handoffs.

Why web designers encounter AVIF files

Designers run into AVIF files more often now because:

• CDN-served images: Websites using Cloudflare, Fastly, or AWS CloudFront often auto-convert images to AVIF. When a designer inspects a page and downloads an image, it may arrive as AVIF.
• Developer handoffs: Front-end developers optimizing for performance convert design assets to AVIF. When the designer needs to update the asset, the AVIF version is what is available.
• Client assets: Clients increasingly provide assets in AVIF because their current website uses them. Asking a client to re-export in PNG adds friction to the project.
• Stock image downloads: Some modern stock image sites serve downloads in AVIF to reduce file sizes.

In all of these cases, PNG is the destination format for design work because it is what Figma, Photoshop, Sketch, and Illustrator work with natively and reliably.

Converting AVIF logos with transparent backgrounds to PNG

Logos are the most common transparent AVIF assets a designer will encounter. The conversion is straightforward — use the AVIF to PNG converter, which preserves the alpha channel exactly:

1. Open the converter at wildandfreetools.com/converter-tools/avif-to-png/
2. Drop your AVIF logo file
3. Download the PNG
4. Open in Figma, Photoshop, or Sketch — the transparency is intact

Checking transparency after conversion: In Figma, drag the PNG onto the canvas. If the background is transparent, you will see the logo floating on the canvas background color. In Photoshop, open the PNG — the Layers panel should show the layer has a transparent background (indicated by the gray checkerboard pattern).

Related: complete guide to AVIF to PNG with transparent background and PNG transparency explained.

Sell Custom Apparel — We Handle Printing & Free Shipping

Converting AVIF icons and UI assets for Figma and Photoshop

UI designers frequently need to pull icon assets from a live web build into their design file for editing. When those icons are served as AVIF:

• Figma can import PNG natively and works better with PNG for raster assets than AVIF
• Photoshop (older versions) cannot open AVIF without a plugin; PNG opens immediately
• Sketch does not support AVIF; PNG is the standard format
• Adobe XD had limited AVIF support; PNG works universally

For icon sets, use the batch conversion to convert an entire icon folder at once rather than file by file. Drop all icons onto the tool, convert, and download the full set as PNG in one session.

AVIF to PNG for client deliverables and design handoffs

When delivering final assets to clients, PNG is the standard for images that need to be used across contexts — websites, documents, presentations, social media, print. Even if the client's website serves AVIF, the source assets they keep in their asset library should be PNG (or SVG for vector graphics).

Converting any AVIF assets back to PNG before delivery ensures:

• The client can open them in any software they happen to use
• Transparency is preserved and functional in Office applications
• Future designers can use the assets without format conversion headaches

Design workflow tip: After converting AVIF assets to PNG for editing, use the image compressor to create a web-optimized version, and the image resizer to prepare specific sizes for different contexts. Or convert back to AVIF or WebP for the final web delivery.

Free tools every web designer should know

Related tools on WildandFree that complement AVIF to PNG conversion:

• AVIF to JPG — when transparency is not needed and smaller file size matters
• Image resizer — resize PNG assets to specific dimensions for different platforms
• Image cropper — crop to exact aspect ratios (social, banner, thumbnail)
• Image compressor — reduce PNG file size for web use without visual quality loss
• AI background remover — remove backgrounds from any image to create transparent PNG versions
• PNG to WebP — convert PNG back to a modern web format after editing

See also: how to convert between JPG, PNG, WebP, and HEIC free.

Frequently Asked Questions

Can I import a converted PNG directly into Figma?

Yes. Figma accepts PNG natively. Drag the PNG into your Figma file and it imports with full transparency intact.

Does AVIF work in Photoshop?

Modern Photoshop (2022+) supports AVIF. Older Photoshop versions (CS6, CC2019 and earlier) require conversion to PNG first.

What resolution does the PNG maintain after converting from AVIF?

Full resolution — the PNG matches the AVIF source pixel-for-pixel at the same dimensions. No resampling occurs during conversion.

Can I use the converted PNG for print work?

Yes. PNG is a lossless format suitable for print. Check that the resolution is sufficient for your print size — web images are typically 72-96 DPI which may not be enough for print quality work.

How do I get AVIF images from a website for design use?

In Chrome DevTools, go to Network > Images, find the image, right-click and Save. This often gives you the AVIF served to the browser. Then convert to PNG using the WildandFree converter.