Icon Folder Preview helps you inspect a folder full of icons or images without leaving VS Code. Instead of opening files one by one, it turns the folder into a searchable visual gallery.
What this extension is for
This extension is useful when you have a design asset folder, icon pack, or image directory and need to quickly answer questions like:
Which icon file do I need?
Do I already have this asset in SVG or PNG?
What is the exact file name or relative path?
How does this icon look before I copy its path into code?
What it does
Scans the selected folder recursively for supported image assets.
Separates SVG icons from raster images.
Shows everything in a visual gallery inside a VS Code webview.
Filters results by search text using asset name, filename, and relative path.
Lets you switch between all assets, SVG only, or raster images only.
Lets you resize the SVG grid for easier browsing.
Opens a larger preview when you click an asset.
Copies the asset name, relative path, or webview URI from the preview dialog.
Lets you refresh the current folder or change to a different folder from the same panel.
Supported formats:
.svg
.png
.jpg
.jpeg
.webp
.gif
.ico
.bmp
.avif
Real usage
Use this extension when you are working on UI code, documentation, design systems, or asset cleanup and need to browse icons quickly.
Typical examples:
Frontend work: find the exact icon file to reference in a component.
Design handoff: inspect a folder from design exports and compare SVG vs PNG versions.
Cleanup work: identify duplicate-looking assets by previewing them visually.
Documentation work: copy the correct relative path for screenshots or asset references.
How to use it
Open from the Explorer
Install the VSIX.
In the VS Code Explorer, right-click a folder that contains icons or images.
Choose Preview Icons & Images.
A preview panel opens and scans the folder.
Open from the Command Palette
Open the Command Palette.
Run Icon Folder Preview: Choose Folder….
Pick the folder you want to inspect.
Work inside the preview panel
Wait for the folder scan to complete.
Use the search box to narrow results.
Use All, SVG, or Images to filter the gallery.
Use the Size slider to adjust SVG card size.
Click an asset to open the larger preview.
Use Copy name, Copy path, or Copy URI depending on what you need.
Use Refresh after assets change on disk.
Use Change Folder to preview another folder without closing the panel.
Step by step: what happens internally
The extension command receives a folder from the Explorer or the folder picker.
A VS Code webview panel is opened for that folder.
The panel shows a loading screen immediately.
The extension scans the folder recursively up to 5 levels deep.
Hidden files and hidden folders are ignored.
Only supported image extensions are included.
Each matching file is converted into an asset model containing its name, filename, type, and relative path.
Local file paths are converted into safe webview URIs so the panel can render them.
The panel builds two result sections:
SVG Icons
Images
Search and filter actions happen in the webview without rescanning the folder.
Clicking an asset opens a lightbox preview with quick copy actions.
Refresh rescans the same folder.
Change Folder recreates the panel with a new folder root.
