Skip to main content

​
Icon Library

The Meteor Icon Kit includes over 880+ professionally designed icons across multiple categories. Each icon is available in both regular (outlined) and solid (filled) styles.

​
Library Statistics

  • Regular icons: 461
  • Solid icons: 425
  • Total unique icons: 880+
  • File format: SVG
  • License: MIT

​
Finding Icons

​
Browse by Category

Icons are organized into logical categories for easy discovery. Common categories include:
  • Navigation & Arrows: Direction, movement, and navigation
  • Actions: User interactions and operations
  • Commerce: Shopping, payments, and transactions
  • Communication: Messaging, notifications, and social
  • Media & Files: Documents, images, and media
  • Interface: Settings, controls, and UI elements
  • Data & Analytics: Charts, graphs, and data visualization
  • Devices & Technology: Hardware and tech-related icons

​
Search by Name

All icon files follow a consistent naming convention: 
{icon-name}.svg
Examples:
  • activity.svg
  • shopping-cart.svg
  • arrow-right.svg
  • user-circle.svg

​
Popular Icons

Here are some of the most commonly used icons in the library:

​
Actions & Interface

  • check - Confirmation and success states
  • x / close - Close dialogs and dismiss actions
  • plus - Add new items
  • trash - Delete actions
  • edit - Edit and modify content
  • copy - Duplicate items
  • save - Save changes
  • settings - Configuration and preferences
  • search - Search functionality
  • filter - Filter and sort options

​
Navigation

  • arrow-right - Forward navigation
  • arrow-left - Back navigation
  • arrow-up - Upward movement
  • arrow-down - Downward movement
  • chevron-right - Subtle forward indicator
  • chevron-left - Subtle back indicator
  • chevron-up - Collapse or scroll up
  • chevron-down - Expand or scroll down
  • bars - Menu/hamburger icon
  • home - Home navigation

​
Commerce

  • shopping-cart - Shopping cart
  • shopping-bag - Shopping bag
  • wallet - Payment and wallet
  • credit-card - Payment methods
  • tag - Pricing and labels
  • barcode - Product identification
  • qr-code - QR scanning

​
Communication

  • mail - Email and messages
  • bell - Notifications
  • phone - Calls and contact
  • message - Chat and messaging
  • share - Social sharing
  • bookmark - Save for later
  • star - Favorites and ratings

​
Media

  • image - Photos and images
  • video - Video content
  • camera - Photo capture
  • file - Documents and files
  • folder - File organization
  • download - Download actions
  • upload - Upload actions

​
Data & Analytics

  • chart-line - Line charts
  • chart-bar - Bar charts
  • analytics - Analytics and insights
  • activity - Activity tracking
  • calendar - Date and scheduling

​
Status & Feedback

  • check-circle - Success states
  • warning - Warning messages
  • error-circle - Error states
  • info - Information
  • bell-slash - Muted notifications
  • ban - Blocked or prohibited

​
Icon Styles

​
Regular (Outlined)

Location: @shopware-ag/meteor-icon-kit/icons/regular/ Example icons: 
import activity from '@shopware-ag/meteor-icon-kit/icons/regular/activity.svg';
import archive from '@shopware-ag/meteor-icon-kit/icons/regular/archive.svg';
import bell from '@shopware-ag/meteor-icon-kit/icons/regular/bell.svg';
import calendar from '@shopware-ag/meteor-icon-kit/icons/regular/calendar.svg';
import camera from '@shopware-ag/meteor-icon-kit/icons/regular/camera.svg';
import chartLine from '@shopware-ag/meteor-icon-kit/icons/regular/chart-line.svg';
import edit from '@shopware-ag/meteor-icon-kit/icons/regular/edit.svg';
import mail from '@shopware-ag/meteor-icon-kit/icons/regular/mail.svg';
import search from '@shopware-ag/meteor-icon-kit/icons/regular/search.svg';
import settings from '@shopware-ag/meteor-icon-kit/icons/regular/settings.svg';
import shoppingCart from '@shopware-ag/meteor-icon-kit/icons/regular/shopping-cart.svg';
import user from '@shopware-ag/meteor-icon-kit/icons/regular/user.svg';
import wallet from '@shopware-ag/meteor-icon-kit/icons/regular/wallet.svg';

​
Solid (Filled)

Location: @shopware-ag/meteor-icon-kit/icons/solid/ Example icons: 
import activity from '@shopware-ag/meteor-icon-kit/icons/solid/activity.svg';
import archive from '@shopware-ag/meteor-icon-kit/icons/solid/archive.svg';
import bell from '@shopware-ag/meteor-icon-kit/icons/solid/bell.svg';
import calendar from '@shopware-ag/meteor-icon-kit/icons/solid/calendar.svg';
import camera from '@shopware-ag/meteor-icon-kit/icons/solid/camera.svg';
import chartLine from '@shopware-ag/meteor-icon-kit/icons/solid/chart-line.svg';
import edit from '@shopware-ag/meteor-icon-kit/icons/solid/edit.svg';
import mail from '@shopware-ag/meteor-icon-kit/icons/solid/mail.svg';
import search from '@shopware-ag/meteor-icon-kit/icons/solid/search.svg';
import settings from '@shopware-ag/meteor-icon-kit/icons/solid/settings.svg';
import shoppingCart from '@shopware-ag/meteor-icon-kit/icons/solid/shopping-cart.svg';
import user from '@shopware-ag/meteor-icon-kit/icons/solid/user.svg';
import wallet from '@shopware-ag/meteor-icon-kit/icons/solid/wallet.svg';

​
Sample Icon Names

Here’s a quick reference of available icon names:

​
A-C

3d, AR, activity, align-center, align-justify, align-left, align-right, analytics, archive, arrows, artificial-intelligence, audio-description, balance-scale, ban, barcode, barcode-scan, bars, bars-circle, bars-square, beer, bell, bell-slash, blocked-circle, bold, bolt, book-user, bookmark, books, box, box-alt, boxes, brands, briefcase, bug, bulk-edit, calendar, camera, chart-bar, chart-line, chart-line-arrow, chart-line-down-s, chart-line-up-s

​
And many more…

The complete library includes hundreds of additional icons covering:
  • Text formatting (bold, italic, underline)
  • File operations (copy, paste, cut)
  • Media controls (play, pause, stop)
  • Directional arrows (all directions and styles)
  • Size variants (many icons have -s, -xs variants)
  • Specialized icons (3D, AR, artificial-intelligence)

​
Icon Metadata

Each icon includes metadata with:
  • Name: The icon identifier
  • Tags: Searchable keywords
  • Modes: Available styles (regular, solid)
  • Sizes: Available size variants
  • Related: Similar or related icons
This metadata is available in icons/meta.json for programmatic access.

​
Browsing the Full Library

​
In Your Project

After installing the package, you can browse all available icons: 
# List regular icons
ls node_modules/@shopware-ag/meteor-icon-kit/icons/regular/

# List solid icons
ls node_modules/@shopware-ag/meteor-icon-kit/icons/solid/

​
In Figma

Designers can access the complete icon library in Figma: Meteor Icon Kit Figma Library The Figma library includes:
  • All icons organized by category
  • Both regular and solid styles
  • Easy search and filtering
  • Drag-and-drop usage in designs

​
Size Variants

Many icons include size variants denoted by suffixes:
  • Default (no suffix) - Standard 24x24px
  • -s suffix - Small variant
  • -xs suffix - Extra small variant
Examples:
  • align-center.svg - Standard size
  • align-center-xs.svg - Extra small size
  • bars.svg - Standard size
  • bars-s.svg - Small size

​
Usage Examples

​
Import Multiple Icons

import activity from '@shopware-ag/meteor-icon-kit/icons/regular/activity.svg';
import analytics from '@shopware-ag/meteor-icon-kit/icons/regular/analytics.svg';
import archive from '@shopware-ag/meteor-icon-kit/icons/regular/archive.svg';
import bell from '@shopware-ag/meteor-icon-kit/icons/solid/bell.svg';
import calendar from '@shopware-ag/meteor-icon-kit/icons/regular/calendar.svg';
import camera from '@shopware-ag/meteor-icon-kit/icons/regular/camera.svg';
import chartLine from '@shopware-ag/meteor-icon-kit/icons/regular/chart-line.svg';
import shoppingCart from '@shopware-ag/meteor-icon-kit/icons/solid/shopping-cart.svg';

​
Dynamic Icon Loading

const iconStyle = 'regular'; // or 'solid'
const iconName = 'activity';

const icon = await import(
  `@shopware-ag/meteor-icon-kit/icons/${iconStyle}/${iconName}.svg`
);

​
Need Help Finding an Icon?

If you can’t find a specific icon:
  1. Check the meta.json file for searchable tags
  2. Browse similar categories
  3. Look for related icons in the metadata
  4. Check size variants (standard, -s, -xs)
  5. Search both regular and solid directories

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us