Import
Import only the icons your application needs.
Icons
Beautiful SVG Icons
SHIVMS UI includes a growing collection of lightweight SVG icons designed to work perfectly with every component.
Import
import {
SearchIcon,
UsersIcon,
} from "@shivms/ui";Features
Every icon is designed for consistency, customization and performance.
size
Control the icon size using the size prop.
color
Icons inherit the current text color by default.
SVG
Lightweight SVG icons optimized for performance.
Basic Usage
Import any icon and render it like a normal React component.
import {
SearchIcon,
} from "@shivms/ui";
export default function App() {
return (
<SearchIcon
size={24}
/>
);
}Available Icons
SearchIcon
UsersIcon
MailIcon
LockIcon
EyeIcon
EyeOffIcon
CheckIcon
CloseIcon
BoltIcon
ShieldCheckIcon
CloudSyncIcon
ArrowRightIcon
AppsIcon
TransactionsIcon
ReportsIcon
AnalyticsIcon
SettingsIcon
NotificationIcon
HelpIcon
CalendarIcon
MessagesIcon
RevenueIcon
ExpensesIcon
NetProfitIcon
OrdersIcon
StocksIcon
NewOrdersIcon
ERPIcon
CubeIcon
ClipboardIcon
GridIcon
TableIcon
CompassIcon
BellIcon
LayersIcon
ImageIcon
ChartBarIcon
WrenchIcon
KeyboardIcon
AccessibilityIcon
CursorIcon
FocusIcon
ContrastIcon
ScreenReaderIcon
TypographyIcon
BadgeIcon
LinkIcon
LoaderIcon
MinusIcon
SparklesIcon
SquareIcon
ChevronRightIcon
LogoIcon
CalendarRangeIcon
ErrorIcon
UploadIcon
NumberIcon
RadioIcon
ChevronDownIcon
SwitchIcon
AspectRatioIcon
BoxIcon
ContainerIcon
FlexIcon
SpacerIcon
StackIcon
CardIcon
ChipIcon
EmptyStateIcon
ListIcon
TimelineIcon
TreeViewIcon
DataGridIcon
TabsIcon
PaginationIcon
MenuIcon
SidebarIcon
NavbarIcon
StepperIcon
ToastIcon
TooltipIcon
PopoverIcon
DialogIcon
ModalIcon
DrawerIcon
ContextMenuIcon
CommandPaletteIcon
CarouselIcon
VideoIcon
ScrollIcon
CopyIcon
ThemeIcon
PlusIcon
Why Use SHIVMS Icons?
01
SVG Based
Crisp rendering at every screen size.
02
Easy Customization
Customize size, color and styling with ease.
03
Optimized
Lightweight components with excellent performance.
Continue Reading
Explore more SHIVMS UI documentation and guides.
Learn what SHIVMS UI is and how to begin.
Install the library into your project.
Reusable React hooks for state, themes and responsiveness.
Use built-in icons throughout your application.
Configure light and dark themes.
Reusable helper functions for everyday development.
Build accessible user interfaces.
Customize colors, spacing and components.
See what's new in each release.