solace-ui-icons

A professional, secure SVG icon library for React applications. All icons are security-scanned, sanitized, and production-ready.

Overview

The solace-ui-icons library provides a collection of SVG icons that are wrapped in Material UI's SvgIcon component. The icons are organized by size (16px, 24px, 32px, 40px) and are available as React components.

Security & Quality Assurance

This package undergoes rigorous security and quality checks before publication:

• ✅ Zero Production Vulnerabilities - Regular dependency scanning with zero known security issues
• ✅ SVG Security Scanning - All 369 SVG files verified free of malicious content (scripts, event handlers, external references)
• ✅ SVGO Processing - Automated sanitization removes metadata, dangerous elements, and optimizes file size
• ✅ TypeScript Support - Complete type definitions for type-safe development
• ✅ Apache 2.0 Licensed - Permissive license safe for commercial use
• ✅ No Runtime Dependencies - Zero production dependencies means zero transitive vulnerability risk
• ✅ Compliance Verified - Comprehensive legal and security compliance review completed

All icons include proper copyright headers and are regularly maintained by Solace.

Install

npm install --save solace-ui-icons

Basic Usage

Importing and Using Icons

Icons are named based on their filename and size. For example, arrowLeft.svg in the 24px directory becomes ArrowLeft24Icon.

import { ReactElement } from "react";
import { ArrowLeft24Icon, Bug16Icon } from "solace-ui-icons";

const App = (): ReactElement => {
  return (
    <>
      <ArrowLeft24Icon />
      <Bug16Icon />
      <OtherComponents />
    </>
  );
};

Using Illustrations

To import an illustration using ReactJS (assuming you have proper SVG support with babel/webpack):

import { SolaceIcon } from "@solace-ui-components";
import { ReactComponent as Designer } from "solace-ui-icons/dist/illustrations/designer.svg";

const Demo = (): ReactElement => {
  return (
    <div>
      <Designer />
    </div>
  );
};

Theming and Styling Icons

The icons in this library are wrapped in MUI's SvgIcon component, which provides several ways to customize their appearance.

1. Using MUI's Color Properties

The icons inherit color from their parent by default, but you can explicitly set colors using MUI's color properties:

<ArrowLeft24Icon color="primary" />
<Bug16Icon color="secondary" />
<CheckFilled16Icon color="success" />
<ErrorCircle16Icon color="error" />
<ContentSearch24Icon color="warning" />
<Terminal16Icon color="info" />
<Broker16Icon color="action" />
<Construction24Icon color="disabled" />

2. Using the sx Prop

The sx prop allows for more advanced styling:

<ArrowLeft24Icon
  sx={{
    color: "#FF5722",
    fontSize: "32px", // Override the default size
    "&:hover": {
      color: "#E64A19",
    },
  }}
/>

3. Using CSS Classes

You can apply CSS classes using the className prop:

<ArrowLeft24Icon className="my-icon-class" />

.my-icon-class {
  color: #2196f3;
  transition: transform 0.2s;
}

.my-icon-class:hover {
  transform: scale(1.2);
}

4. Theming with MUI Theme Provider

For consistent styling across your application, use MUI's theme provider:

import { createTheme, ThemeProvider } from "@mui/material/styles";

const theme = createTheme({
  components: {
    MuiSvgIcon: {
      styleOverrides: {
        root: {
          // Default styles for all icons
          transition: "all 0.2s",
          "&:hover": {
            transform: "scale(1.1)",
          },
        },
        fontSizeSmall: {
          // Styles for small icons
          color: "#1976D2",
        },
        fontSizeMedium: {
          // Styles for medium icons
          color: "#388E3C",
        },
        fontSizeLarge: {
          // Styles for large icons
          color: "#D32F2F",
        },
      },
    },
  },
});

function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyComponent />
    </ThemeProvider>
  );
}

Advanced Usage

1. Customizing Icon Properties

You can pass any prop that MUI's SvgIcon accepts (except fontSize which is set based on the icon's size):

<ArrowLeft24Icon
  titleAccess="Go back" // Adds a title for accessibility
  htmlColor="#FF5722" // Sets the color using HTML color attribute
  viewBox="0 0 24 24" // Custom viewBox if needed
  shapeRendering="geometricPrecision" // SVG attribute
  focusable={true} // Makes the icon focusable
/>

2. Using Icons in Buttons

import { Button, IconButton } from "@mui/material";

function MyComponent() {
  return (
    <>
      <Button startIcon={<ArrowLeft24Icon />}>Back</Button>

      <IconButton aria-label="delete">
        <Bug16Icon />
      </IconButton>
    </>
  );
}

3. Animating Icons

<ArrowLeft24Icon
  sx={{
    animation: "spin 2s linear infinite",
    "@keyframes spin": {
      "0%": {
        transform: "rotate(0deg)",
      },
      "100%": {
        transform: "rotate(360deg)",
      },
    },
  }}
/>

4. Responsive Icon Sizes

<ArrowLeft24Icon
  sx={{
    fontSize: {
      xs: 16, // Extra small devices
      sm: 20, // Small devices
      md: 24, // Medium devices
      lg: 28, // Large devices
      xl: 32, // Extra large devices
    },
  }}
/>

5. How the Icons Work Internally

Each icon is a React component that wraps the SVG content in MUI's SvgIcon component:

import { SvgIcon, SvgIconProps } from "@mui/material";

const ArrowLeft24Icon = (props: Omit<SvgIconProps, "fontSize">) => {
  const { sx, ...rest } = props;
  return (
    <SvgIcon sx={{ fontSize: 24, ...sx }} {...rest}>
      {/* SVG content here */}
    </SvgIcon>
  );
};

export default ArrowLeft24Icon;

This structure allows you to leverage all the styling and theming capabilities of MUI's SvgIcon component while maintaining the specific size and design of each icon.

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Copyright 2023-2025 Solace Systems

For more information, visit https://solace.dev