⚡ FlatGrabber: Premium Flaticon SVG Extractor & Figma Bridge

FlatGrabber is a professional, high-performance developer-and-designer-focused Google Chrome extension engineered to inspect, edit, recolor, bulk package, and extract clean high-fidelity vector SVGs directly from Flaticon. Features a seamless, zero-friction Figma clipboard bridge to paste vector coordinates straight onto your design canvas as fully editable layers.

Features • How it Works • Step-by-Step Guide • Installation • Deep-Dive • Troubleshooting

---

🚀 Key Features

• ⚡ Smart Hover Grabber: Non-intrusive hover triggers positioned intelligently in the top-right of Flaticon grid elements. Expands on hover to avoid blocking standard website controls or overlapping adjacent icon rows.
• 🎨 Instant Vector Recolor: Dynamically edit colors of single icons or your entire saved collection in real time directly from the extension's panel before exporting.
• ✨ Bulletproof Figma Bridge: Copy vector codes with one click (Copy button or C shortcut) and paste them directly into Figma as fully editable vector layers.
• 🔥 Figma Grid Packager: Copies your entire saved collection as a single, beautifully structured coordinate grid. Paste it directly into Figma to populate your canvas instantly.
• 📦 Parallel Bulk Grabber ("Grab Page"): Grab all icons on the page concurrently with an animated progress pipeline.
• 💾 Offline ZIP Archiver: Instantly compress and download your entire collection as beautifully categorized, optimized vector files locally.
• 🏁 Checkerboard Previews: Custom transparency checkerboard backgrounds in the preview canvas and grid items so both pure white and pure black icons stand out.
• 🔒 Smart Vector Status Indicator: Automatically detects if an icon is PNG-only or Vector. If vector data is unavailable, it disables the SVG tab and provides clear tooltips to prevent empty clipboard errors.

---

⚙️ How DOM Vector Extraction Works

FlatGrabber functions as an advanced front-end debugging and inspection tool. It inspects and parses the active SVG node structures loaded into the browser's DOM when running Flaticon's online canvas editor, formatting them into developer-compliant XML.

sequenceDiagram
    autonumber
    actor Designer as User
    participant Page as Flaticon Detail Page
    participant Editor as Flaticon Icon Editor
    participant Scraper as FlatGrabber Engine
    participant Figma as Figma Canvas
    
    Designer->>Page: Click "Edit icon" Pencil Button
    Page->>Editor: Load Vector Canvas Editor
    Note over Editor: Loads raw vector path markup<br/>directly in browser DOM context
    Scraper->>Editor: Inject Grab UI & Canvas Interceptor
    Designer->>Scraper: Click Floating "Click to Grab SVG" Button
    Scraper->>Editor: Traverses canvas layers & grabs raw vector paths
    Scraper->>Scraper: Format paths into clean XML SVG code
    Scraper->>Designer: Render in FlatGrabber Dark Panel
    Designer->>Scraper: Click "Copy to Figma" (or Press C)
    Scraper->>Figma: Paste directly as fully editable vector shape

Loading

---

🔍 DOM Vector Extraction Guide (Step-by-Step)

To extract clean vector paths for testing and debugging any compatible icon layout, follow this simple procedure:

For a fully comprehensive, visual tutorial on utilizing all features (Dynamic Recoloring, Figma Grid compiler, Bulk ZIP downloader), read the 🎨 Comprehensive User Guide (GUIDE.md).

---

🛠️ Installation Guide

Follow these simple steps to load FlatGrabber locally in developer mode:

For advanced environment configuration, runtime verification, updating guidelines, and console debugging steps, read the 🛠️ Comprehensive Setup Guide (INSTALL.md).

---

📂 Project Architecture & Codebase Overview

├── manifest.json         # Extension configuration, permissions & background mappings
├── content.js            # Capture-phase click interceptors, canvas parsers & UI pipeline
├── styles.css            # Premium dark-theme glassmorphism layout & animations
├── background.js         # Port listener bypass for secure CDN vector fetching
├── popup.html            # Extension action popup UI (with UTF-8 support & interactive guide)
├── popup.js              # Native Chrome tab handlers for the popup launch action
├── jszip.min.js          # Fast offline ZIP generation library
└── icon.png              # Extension branding icons

Script-by-Script Breakdown

• manifest.json: Explicitly declares extension permissions (activeTab, clipboardWrite, scripting) and hooks up the content scripts to only run when the user is on Flaticon.
• content.js: The brains of the extension. Operates a heavy-duty listener network, intercepts custom Flaticon DOM events using capture-phase interception ({ capture: true }), scrapes the inline canvas elements, compiles raw SVG coordinates, recolors layers, and drives the Figma clipboard formatter.
• styles.css: Supplies premium dark glassmorphic components, custom scrollbars, animated loading pipelines, and the checkerboard canvas previews.
• background.js: Works in the background to handle bypass routes and fetch remote SVGs securely when direct client requests are blocked by CORS.
• popup.html & popup.js: Provide the user-facing dropdown instructions and action buttons when they click the extension icon in the Chrome toolbar.

---

⌨️ Developer Keyboard Shortcuts

Speed up your design system workflow with built-in instant hotkeys (active whenever the FlatGrabber sidebar panel is open):

Key	Action	Description
I	Toggle Inspector	Enables instant canvas highlighter mode to click-to-grab any icon.
C	Copy Code	Instantly copy active SVG code or PNG Image Tag to clipboard.
S	Save Asset	Save active asset into your local collection.

---

🔍 Technical Deep-Dive

1. The Figma Clipboard Bridge Format

Figma does not accept raw string text as vectors. To make vectors pasteable directly onto the Figma canvas as fully editable vectors (rather than a raw code block), the extension wraps the standard SVG string in a specific custom MIME type wrapper (text/html) with standard HTML formatting tags:

const figmaPayload = `<span class="svg-wrapper">${svgCode}</span>`;

When this payload is copied to the system clipboard, Figma parses the raw HTML wrapper, extracts the child SVG node, and reconstructs the coordinate nodes natively.

2. Capture Phase Event Interception

Flaticon uses heavy internal event listeners on grid icon containers to hijack clicks and route users to detail pages. To intercept a click on our custom floating "Grab" badge without triggering Flaticon's standard page routing, FlatGrabber registers click event listeners in the Capture Phase instead of the bubbling phase:

element.addEventListener('click', grabHandler, { capture: true });

We then trigger event.stopPropagation() and event.preventDefault() to stop the event dead in its tracks before Flaticon's native routing scripts can even detect it.

3. Recolor Processing Pipeline

The recolor logic parses the scraped SVG XML and dynamically modifies all occurrences of standard color tags. Rather than performing simple string replacement which can corrupt tags inside code blocks, FlatGrabber uses DOMParser to load the SVG string as a virtual DOM document:

const parser = new DOMParser();
const svgDoc = parser.parseFromString(svgString, "image/svg+xml");
// Traverses elements and dynamically replaces hex codes on fill and stroke attributes
svgDoc.querySelectorAll('[fill], [stroke]').forEach(elem => {
  // updates values
});

---

⚠️ Troubleshooting & FAQ

Q1: Emojis are showing up as garbled characters (like 🎨 or âœ...). How do I fix this?

We have fully solved this! Older versions had encoding mismatches. FlatGrabber's popup file now includes <meta charset="UTF-8"> explicitly at the very beginning of the <head> block, ensuring emojis render perfectly on all operating systems and browser versions.

Q2: The "SVG Code" tab is disabled and greyed out. Why?

This occurs because the icon you selected does not have underlying vector coordinate data available in the DOM (some legacy icons on Flaticon are pure PNG uploads). FlatGrabber handles this gracefully by showing a tooltip explanation and keeping the "PNG Image" tab active so your experience remains smooth.

Q3: Why does the Grab button not show up on some search results?

Make sure you are hovering over the main icon grid card. If Flaticon changes its grid CSS class names during updates, click the "Inspect Mode" (or press I) to force-activate the target highlighter and click any SVG manually.

---

---

📡 SEO Optimizations & Keywords

This repository is optimized for discoverability across search engines and developer ecosystems:

• Primary Keywords: Flaticon SVG Downloader, Figma Vector Bridge, Chrome SVG Grabber, Inline SVG Extractor, Chrome Extension SVG Parser, Extract SVGs to Figma, Recolor SVGs Online, Developer SVG Inspector, FlatGrabber.
• Compatible Browsers: Google Chrome, Brave Browser, Microsoft Edge, Opera, Vivaldi, and other Chromium-based platforms.
• Figma Integration: Fully matches Figma's desktop and web clipboard formats for zero-friction paste operations.

---

⚖️ Legal & Educational Disclaimer

Important

Please read this disclaimer carefully before using this software.

This project is an open-source educational and technical research experiment designed to study:

1. Front-End DOM Analysis: How vector paths are drawn, nested, and manipulated within in-browser inline canvas elements.
2. Event Manipulation: The mechanics of capture-phase event hijacking ({ capture: true }) and event interception techniques.
3. Clipboard Interoperability: Custom clipboard formatting (text/html wrapper MIME mappings) to enable seamless data transitions to design platforms like Figma.

🔴 Terms of Service and Compliance

• No Affiliation: FlatGrabber is an independent developer-built tool. It is not associated, affiliated, authorized, endorsed by, or in any way officially connected with Freepik Company S.L., Flaticon, or any of their subsidiaries.
• Academic & Testing Use Only: This extension is intended strictly for personal research, educational analysis, layout testing, and design system formatting experiments.
• Commercial Use Restrictions: We strictly discourage any commercial usage of assets extracted through this educational tool without holding the respective premium licenses. Users are solely responsible for ensuring their usage complies with regional copyright laws, Intellectual Property (IP) rights, and the terms of service of any third-party websites they interact with.
• Provided "AS IS": This software is provided under the MIT License on an "AS IS" basis. The authors and contributors assume no liability for any misuse, terms violation, account suspension, or loss of any kind arising from the execution or deployment of this tool.

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

Distributed under the MIT License. See LICENSE for more information.