Skip to main content


In our library, we use our custom icons, community-icons through MUI icon component and font icons.


There are two different ways to use the @selfcommunity community-icons:

  • The first way is to install the @selfcommunity/react-theme-default package and pass it down to your provider context through configurations.
  • Alternatively, if you only want to use the icons, you can import them into the stylesheet directly from @selfcommunity/react-theme-default package.

1) Import:

import defaultTheme from '@selfcommunity/react-theme-default';

import React from 'react';
import {SCContextProvider} from '@selfcommunity/react-core';
import {MyComponent} from './MyComponent';

function App() {
const conf = {
portal: '',
locale: {...},
session: {...},
theme: defaultTheme,
return (
<SCContextProvider conf={conf}><MyComponent /></SCContextProvider>


Include community-icons css file in your html:


2) Usage:

  • Inclusion through props in the icon component
import Icon from '@mui/material/Icon';

<Icon baseClassName="community-icons">add_circle</Icon>


  • Inclusion through global style in the theme.
const theme = createTheme({
components: {
MuiIcon: {
defaultProps: {
// Replace the `material-icons` default value.
baseClassName: 'community-icons',

Styling icons

To style icons follow the material design guidelines.