Icons

This guide explains how to use icons in your KimiStores application. We support both Material UI icons and Iconify.

Icon Types Available

Material UI Icons

Official icons from Material Design. These are available through @mui/icons-material package.

Example Icons:

import AdbIcon from '@mui/icons-material/Adb';
import AddIcon from '@mui/icons-material/Add';
import AppleIcon from '@mui/icons-material/Apple';
import AccountCircleIcon from '@mui/icons-material/AccountCircle';
import AirplanemodeActiveIcon from '@mui/icons-material/AirplanemodeActive';
 
function App() {
  return (
    <>
      <AdbIcon color="action" />
      <AddIcon color="disabled" />
      <AccountCircleIcon color="error" />
      <AirplanemodeActiveIcon color="inherit" />
      <AppleIcon color="primary" />
      <AppleIcon color="secondary" />
    </>
  );
}

Note: Per our guidelines, we recommend using Iconify over Material UI icons when possible.

Iconify Icons (Recommended)

Iconify provides access to over 100,000 icons from various icon sets. This is our preferred icon solution.

Browse Iconify Icon Sets

Example Icons:

import Iconify from 'src/components/iconify';
 
function App() {
  return (
    <>
      <Iconify icon="eva:clock-fill" sx={{ color: 'primary.main' }} />
      <Iconify icon="eva:charging-fill" sx={{ color: 'secondary.main' }} />
      <Iconify icon="eva:alert-circle-fill" sx={{ color: 'info.main' }} />
      <Iconify icon="eva:color-palette-fill" sx={{ color: 'warning.main' }} />
      <Iconify icon="eva:arrow-circle-down-fill" sx={{ color: 'error.main' }} />
    </>
  );
}

Customizing Icons

You can customize icons by applying MUI's styling props. Common customizations include:

Change size with width and height props
Apply colors using the sx prop with theme values
Add animations or transforms using the sx prop

// Size examples
<Iconify icon="eva:clock-fill" width={16} height={16} />
<Iconify icon="eva:clock-fill" width={24} height={24} />
<Iconify icon="eva:clock-fill" width={32} height={32} />

// Color examples
<Iconify 
  icon="eva:clock-fill" 
  sx={{ 
    color: 'primary.main',
    '&:hover': { color: 'primary.dark' }
  }} 
/>

// Animation example
<Iconify 
  icon="eva:refresh-fill" 
  sx={{ 
    animation: 'spin 2s linear infinite',
    '@keyframes spin': {
      '0%': { transform: 'rotate(0deg)' },
      '100%': { transform: 'rotate(360deg)' },
    }
  }} 
/>

Best Practices

1. Use Iconify over Material UI icons when possible for better performance and flexibility.
2. Keep icon sizes consistent throughout your application.
3. Use theme colors for icons to maintain design consistency.
4. Consider accessibility - provide text alternatives when icons convey important information.

References

Iconify Icon Sets Material UI Icons Documentation KimiStores Color System React Icons (Alternative Icon Library)