GetIllustrations for VS Code Coming Soon

How to install

Why use GetIllustrations in VS Code?

Front-end developers and full-stack engineers spend a surprising amount of time hunting for icons. You need a home icon for the navigation, an arrow for a button, a check mark for a success message. Each time, you open a browser, find an icon, download the SVG, save it to your assets folder, import it into your component, and write the markup. For a single icon, that is five steps and two context switches.

The GetIllustrations VS Code extension cuts that to one step. Open the sidebar panel, search, click Insert, and the SVG appears in your code at the cursor position. It even formats the code for your framework — raw SVG for HTML, camelCase attributes for React, or a base64 img tag if you prefer.

How to install

Open VS Code, go to the Extensions tab (Ctrl+Shift+X), search for "GetIllustrations", and click Install. The plugin icon appears in your Activity Bar. Click it to open the search panel.

Five output formats

Every icon can be inserted in five different formats:

• SVG inline — raw SVG markup, ready for HTML files
• React JSX — SVG with camelCase attributes (className, strokeWidth, fillRule)
• Vue template — standard SVG attributes compatible with Vue single-file components
• img tag — base64-encoded SVG in an img src attribute, with alt text and dimensions
• CSS background — base64 SVG as a CSS background-image property

Set your preferred default format in VS Code settings, or switch formats per icon using the code snippet generator.

Color and size customization

Before inserting an icon, you can change its color using the color picker (6 preset swatches plus custom hex input) and adjust the size with a slider from 16px to 128px. The color and size get baked into the SVG attributes before insertion, so your icon arrives ready to use with no additional CSS needed.

Download to project folder

If you prefer working with SVG files rather than inline code, click the Download button on any icon. The SVG file saves to your configured assets folder (default: ./src/assets/icons). The file name is generated from the icon name — no manual renaming needed.

Frequently asked questions

What you can create with this plugin

Designers use this plugin to build landing pages with matching illustration sets, create app interfaces with consistent icon systems, assemble pitch decks with professional visual elements, design social media graphics with on-brand icons, and put together documentation with clear visual indicators. Developers use it to quickly add SVG icons to component libraries, build navigation systems with consistent iconography, and create data visualization labels with recognizable symbols.

The plugin works best when you need a large variety of icons from a single, consistent source rather than downloading individual files from scattered websites. Because all 24 icon libraries share the same search interface and insert mechanism, switching between Feather, Material, Phosphor, or any other library takes zero effort — just change your search terms.

Icon packs included for free

Every icon library in the plugin is free to use with no attribution required (except CC BY 4.0 icons like Solar, which ask for credit). The 88,000+ free icons cover every category you could need: navigation (arrows, menus, tabs), communication (chat, email, phone), media (play, pause, volume), files (folder, document, download), devices (phone, tablet, laptop), social (GitHub, Twitter, LinkedIn), weather (sun, rain, cloud), maps (pin, compass, route), and hundreds more specialized categories like medical, finance, food, sports, and gaming.

Premium illustration packs add another 37,000+ hand-crafted illustrations across styles including flat, outline, isometric, 3D render, hand-drawn, gradient, and abstract. These are not AI-generated — every illustration was designed by a professional illustrator, which means consistent quality, proper anatomy, and thoughtful composition across entire packs.

Licensing and commercial use

Free icons use their original open-source licenses. Most use MIT, which means you can use them in personal projects, commercial products, client work, and SaaS applications without any restrictions or attribution. Some icons use Apache 2.0 (which includes a patent grant) or ISC (similar to MIT). The Solar icon set uses CC BY 4.0, which asks for attribution when practical.

Premium illustrations come with a commercial license included in your purchase or subscription. You can use them in websites, apps, presentations, marketing materials, social media, print materials, and products for sale. The license covers your team (up to 5 seats on annual plans) and does not expire — files you download are yours to use permanently.

If you need help deciding which plan fits your needs, visit our pricing page for a detailed comparison, or contact our team for custom licensing options.