ShopperMX™

Icon Library

Browse all available icons for use throughout the application. Includes both custom SVG icons and Lucide React icons.

Custom SVG Icons

These are custom SVG icons located in /public/new-icons/

5Products & Systems

SMX

SMX

SMX_Icon.svg

SMX_Icon.svg
SMXGO

SMXGO

SMXGO_Icon.svg

SMXGO_Icon.svg
SS3D

SS3D

SS3D_Icon.svg

SS3D_Icon.svg
VAA

VAA

VAA_Icon.svg

VAA_Icon.svg
ArrangementAI

ArrangementAI

ArrangementAI_Icon.svg

ArrangementAI_Icon.svg

4Support & Help

ClientSupport

ClientSupport

ClientSupport_Icon.svg

ClientSupport_Icon.svg
TechnicalSupport

TechnicalSupport

TechnicalSupport_icon.svg

TechnicalSupport_icon.svg
ContactSupportTeamandOther

ContactSupportTeamandOther

ContactSupportTeamandOther_Icon.svg

ContactSupportTeamandOther_Icon.svg
ProfileandAccountHelp

ProfileandAccountHelp

ProfileandAccountHelp_Icon.svg

ProfileandAccountHelp_Icon.svg

6Status & Operations

SystemStatus

SystemStatus

SystemStatus_Icon.svg

SystemStatus_Icon.svg
SystemStatusPage

SystemStatusPage

SystemStatusPage_Icon.svg

SystemStatusPage_Icon.svg
SystemsOperational

SystemsOperational

SystemsOperational_Icon.svg

SystemsOperational_Icon.svg
OperationalTag

OperationalTag

OperationalTag_Icon.svg

OperationalTag_Icon.svg
NoRecentIncidents

NoRecentIncidents

NoRecentIncidents_Icon.svg

NoRecentIncidents_Icon.svg
Resolved

Resolved

Resolved_Icon.svg

Resolved_Icon.svg

6Actions & Tools

Search

Search

Search_Icon.svg

Search_Icon.svg
Copy

Copy

Copy_Icon.svg

Copy_Icon.svg
Refresh

Refresh

Refresh_Icon.svg

Refresh_Icon.svg
View

View

View_Icon.svg

View_Icon.svg
RequesterEdit

RequesterEdit

RequesterEdit_Icon.svg

RequesterEdit_Icon.svg
SelectFile

SelectFile

SelectFile_Icon.svg

SelectFile_Icon.svg

8Content & Data

Product

Product

Product_Icon.svg

Product_Icon.svg
Store

Store

Store_Icon.svg

Store_Icon.svg
Planogram

Planogram

Planogram_icon.svg

Planogram_icon.svg
Signage

Signage

Signage_Icon.svg

Signage_Icon.svg
Display

Display

Display_Icon.svg

Display_Icon.svg
Tag

Tag

Tag_Icon.svg

Tag_Icon.svg
categorymanagement

categorymanagement

categorymanagement_icon.svg

categorymanagement_icon.svg
project

project

project_icon.svg

project_icon.svg

3Time & Updates

Calendar

Calendar

Calendar_Icon.svg

Calendar_Icon.svg
Duration

Duration

Duration_Icon.svg

Duration_Icon.svg
LastUpdated

LastUpdated

LastUpdated_Icon.svg

LastUpdated_Icon.svg

2Communication

Comment

Comment

Comment_Icon.svg

Comment_Icon.svg
email

email

email_icon.svg

email_icon.svg

2Authentication

AuthenticationSuccessful

AuthenticationSuccessful

AuthenticationSuccessful_Icon.svg

AuthenticationSuccessful_Icon.svg
ShopperMXLogin

ShopperMXLogin

ShopperMXLogin_Icon.svg

ShopperMXLogin_Icon.svg

1UI Elements

Dropdown

Dropdown

Dropdown_Icon.svg

Dropdown_Icon.svg

Lucide React Icons

These are icons from the lucide-react library. Import them directly: import { IconName } from 'lucide-react'

12Navigation

ChevronDown

ChevronDown

ChevronUp

ChevronUp

ChevronLeft

ChevronLeft

ChevronRight

ChevronRight

ArrowLeft

ArrowLeft

ArrowRight

ArrowRight

ArrowUp

ArrowUp

ArrowDown

ArrowDown

Menu

Menu

X

X

Home

Home

Navigation

Navigation

15Actions

Plus

Plus

Minus

Minus

Edit

Edit

Edit2

Edit2

Trash

Trash

Trash2

Trash2

Copy

Copy

Save

Save

Download

Download

Upload

Upload

Share

Share

Send

Send

Check

Check

X

X

XCircle

XCircle

8Status

CheckCircle

CheckCircle

XCircle

XCircle

AlertCircle

AlertCircle

Info

Info

Clock

Clock

Calendar

Calendar

Timer

Timer

Activity

Activity

7Communication

MessageSquare

MessageSquare

MessageCircle

MessageCircle

Mail

Mail

Phone

Phone

Send

Send

Reply

Reply

Forward

Forward

8User & Account

User

User

Users

Users

UserPlus

UserPlus

UserMinus

UserMinus

LogOut

LogOut

LogIn

LogIn

Settings

Settings

Bell

Bell

7Files & Documents

File

File

FileText

FileText

Folder

Folder

FolderOpen

FolderOpen

Image

Image

FileImage

FileImage

Paperclip

Paperclip

5Search & Filter

Search

Search

Filter

Filter

Sliders

Sliders

SortAsc

SortAsc

SortDesc

SortDesc

7Display

Eye

Eye

EyeOff

EyeOff

Grid

Grid

List

List

Layout

Layout

Monitor

Monitor

Smartphone

Smartphone

8Media

Play

Play

Pause

Pause

Stop

Stop

Volume

Volume

Volume2

Volume2

VolumeX

VolumeX

Image

Image

Video

Video

6Business

Building

Building

Store

Store

ShoppingCart

ShoppingCart

Package

Package

Tag

Tag

Tags

Tags

6Help & Support

HelpCircle

HelpCircle

QuestionMark

QuestionMark

Info

Info

AlertCircle

AlertCircle

Book

Book

BookOpen

BookOpen

6System

RefreshCw

RefreshCw

RotateCw

RotateCw

Power

Power

Settings

Settings

Cog

Cog

Wrench

Wrench

Usage Examples

Using SVG Icons

import CategoryIcon from '@/components/help/CategoryIcon';

<CategoryIcon iconName="SMX_Icon.svg" className="w-6 h-6" />
<CategoryIcon iconName="Search_Icon.svg" size={24} />

Using Lucide Icons

import { Search, User, Settings } from 'lucide-react';

<Search className="w-5 h-5" />
<User className="w-6 h-6 text-blue-600" />
<Settings className="w-4 h-4" />

Using CategoryIcon Component

import CategoryIcon from '@/components/help/CategoryIcon';

// Works with both SVG and Lucide icons
<CategoryIcon iconName="SMX_Icon.svg" />
<CategoryIcon iconName="Search" /> // Lucide icon
<CategoryIcon iconName="User" /> // Lucide icon

Summary

Custom SVG Icons

37

Available custom icons

Lucide React Icons

0

Available Lucide icons