Documentation

Quickstart Guide – Productive in 5 Minutes

Premium Icons for Modern Interfaces

Plugin Setup

The IconSphere Figma plugin syncs directly with your organization’s license pool. Download the latest v3.2.1 build from the Figma Community or run npm install @iconsphere/figma-sync in your project root.

1. Authenticate Workspace

Open the plugin panel, paste your team API key from dashboard.iconsphere.io/settings, and select Production as the active environment. The plugin will cache 12,000+ assets locally.

2. Configure Auto-Layout

Enable Smart Padding in the plugin preferences to automatically apply 24px spacing and 16px corner radii to all imported icon components, matching your design system tokens.

3. Link to Git Repository

Connect your Figma file to GitHub or GitLab to trigger automatic version tagging. Each commit pushes a new snapshot to your design library without manual publishing.

Basic Search

Navigate the library using structured filters instead of free-text queries. The search engine indexes taxonomy tags, stroke weights, and visual density scores for precise results.

Filter by Style Family

Select Neumorphic, Duotone, or Linear from the dropdown to isolate collections. Combine with the 2px Stroke toggle to match your interface line-art standards.

Keyword & Metadata Queries

Use prefixes like cat:ui/ for interface controls or cat:nav/ for navigation elements. Add weight:light or density:compact to refine grid alignment and visual hierarchy.

Saved Collections

Star frequently used sets like E-commerce Checkout or SaaS Dashboard to pin them to your plugin sidebar. Collections sync across team members in real-time.

Export Settings

Optimize output formats for web, mobile, and embedded systems. Incorrect scaling or path simplification breaks responsive breakpoints and increases bundle size.

SVG for Web & React

Export as SVGZ Compressed with viewBox="0 0 24 24". Enable Remove Metadata and Optimize Paths to reduce file size below 1.2KB per icon. Compatible with Next.js and Vite.

PNG for iOS & Android

Generate @1x, @2x, and @3x variants automatically. Set background transparency to 100% and color profile to sRGB. Bundle outputs match Apple Human Interface Guidelines and Material 3 specs.

Custom CSS Sprites

For legacy browsers, compile icons into a single base64-encoded sprite sheet. The plugin outputs a ready-to-use icons.css file with responsive background-size rules.