React Icons API

API reference for the React Icons component from Modj.js. Learn about how to use the Icons component and all the valid props that can be supplied to these component.

Import

App.jsx
Execute Code
View Source on Github
Copy to clipbaord
import { 
    AccountIcon,
    AngularIcon,
    AnimatedLaodingIcon,
    AwsIcon,
    BabelIcon,
    BackendIcon,
    CloseIcon,
    CloudIcon,
    CopyIcon,
    CPlusPlusIcon,
    CssIcon,
    CypressIcon,
    DarkThemeIcon,
    DatabaseIcon,
    DesktopIcon,
    DevOpsIcon,
    DjangoIcon,
    DockerIcon,
    DownChevronIcon,
    DownloadIcon,
    EmailIcon,
    ErrorIcon,
    EsLintIcon,
    FacebookIcon,
    FlutterIcon,
    ForwardSlashIcon,
    FrontendIcon,
    FullStackProIcon,
    GithubIcon,
    GitIcon,
    GoogleCloudIcon,
    HtmlIcon,
    InfrastructureIcon,
    JavascriptIcon,
    KotlinIcon,
    KubernetesIcon,
    LeftArrowIcon,
    LightThemeIcon,
    LinkedInIcon,
    LoginIcon,
    MailIcon,
    MenuIcon,
    MinusIcon,
    MobileIcon,
    MobileSettingsIcon,
    MongoDbIcon,
    NextJsIcon,
    NodeIcon,
    NotVisibleIcon,
    NpmIcon,
    PasswordIcon,
    PilotProIcon,
    PlayIcon,
    PlusIcon,
    PostgreSqlIcon,
    PythonIcon,
    QtIcon,
    QuoteIcon,
    ReactIcon,
    RightArrowIcon,
    RightChevronIcon,
    SearchIcon,
    SettingsIcon,
    SquareIcon,
    SubmitIcon,
    SuccessIcon,
    TerminalIcon,
    TerraformIcon,
    TypescriptIcon,
    UpChevronIcon,
    VisibleIcon,
    WebpackIcon,
    WorldWideWebIcon,
    XIcon,
    YoutubeIcon
} from '@modjs/icons'

Icons Props

The following props are specific to the Icons component and can be applied to all the icons component. Note that some of these props may have no effect on brands icons and is only applied to ui icons.

Name	Type	Default	Description
fill	string	"primary"	Adjust the fill value based on theme color or with custom CSS hex color.
stroke	string	"primary"	The stroke for the AnimatedLoadingIcon component.
height	string	"sm / md / lg"	The height of the component.
width	string	"sm / md / lg"	The width of the component.

System Props

The component mentioned in this page is wrapped with a withModSystemProps HOC and therefore, the following props can be applied to this component. Note that some of these props may have no effect on this component.

Name	Type	Default	Description
alignItems	string	-	Controls the alignment of items.
bgColor	"primary" "secondary" "main" "success" "error" "light" "dark" "transparent"	-	Applies background color to the component based on the colors defined in the theme.
bottom	number	-	Applies bottom spacing to the component.
border	"primary" "success" "error" "light" "dark" "none"	-	Applies border to the component based on the borders defined in the theme.
borderTop	"primary" "success" "error" "light" "dark" "none"	-	Applies top border to the component based on the borders defined in the theme.
borderRight	"primary" "success" "error" "light" "dark" "none"	-	Applies right border to the component based on the borders defined in the theme.
borderBottom	"primary" "success" "error" "light" "dark" "none"	-	Applies bottom border to the component based on the borders defined in the theme.
borderLeft	"primary" "success" "error" "light" "dark" "none"	-	Applies left border to the component based on the borders defined in the theme.
borderX	"primary" "success" "error" "light" "dark" "none"	-	Applies left and right border to the component based on the borders defined in the theme.
borderY	"primary" "success" "error" "light" "dark" "none"	-	Applies top and bottom border to the component based on the borders defined in the theme.
borderRadius	number	-	Applies border radius to the component.
color	"primary" "secondary" "main" "success" "error" "light" "dark" "white"	-	Applies color to the text inside this component based on the colors defined in the theme.
display	string	-	Controls how the component should be displayed.
elevation	"light" "normal" "heavy" "none"	-	Applies shadow to the component based on the elevation defined in the theme.
flexWrap	string	-	Controls whether the flex items are forced onto one line or can wrap onto multiple lines.
float	string	-	Controls whether the items are placed to the right or left of its container.
fs	number	-	Applies font-size in rem unit to the text inside of this component.
fw	number	-	Applies font-weight to the text inside of this component.
gap	number	-	Applies gaps/gutters between rows and columns.
height	string	-	Applies height to the component.
justifyContent	string	-	Applies justify-content CSS property to the component.
left	number	-	Applies left spacing to the component.
m	number	-	Applies margin in px to the component.
mt	number	-	Applies top margin in px to the component.
mr	number	-	Applies right margin in px to the component.
mb	number	-	Applies bottom margin in px to the component.
ml	number	-	Applies left margin in px to the component.
mx	number	-	Applies right and left margin in px to the component.
my	number	-	Applies top and bottom margin in px to the component.
p	number	-	Applies padding in px to the component.
pt	number	-	Applies top padding in px to the component.
pr	number	-	Applies right padding in px to the component.
pb	number	-	Applies bottom padding in px to the component.
pl	number	-	Applies left padding in px to the component.
px	number	-	Applies right and left padding in px to the component.
py	number	-	Applies top and bottom padding in px to the component.
position	string	-	Controls the position of the component.
right	number	-	Applies right spacing to the component.
textTransform	string	-	Applies text-transform CSS property to the text inside this component.
textAlign	string	-	Applies text-align CSS property to the text inside this component.
top	number	-	Applies top spacing to the component.
width	string	-	Applies width to the component.

Customization Icons

What are you looking for?

Common Searches:

Settings

React Icons API

Import

Icons Props

System Props