react mui 5 social media icons example

In this tutorial, we will create material ui social media icons in react with material ui (mui 5). We will see mui 5 social media icons facebook, material ui social media icon with button example with react material UI 5.

Install & Setup Vite + React + Typescript + MUI 5

To use material ui icons you need to install @mui/icons-material.

Install the package in your project directory with:

# with npm
npm install @mui/icons-material

# with yarn
yarn add @mui/icons-material

React Material UI 5 Social Media Icons Example

1. react mui 5 material ui social media icons.

import * as React from "react";
import FacebookIcon from "@mui/icons-material/Facebook";
import Stack from "@mui/material/Stack";
import { Container } from "@mui/material";

export default function MaterialIcon() {
  return (
    <Container maxWidth="md" sx={{ mt: 8 }}>
      <Stack direction="row" alignItems="center" spacing={2}>
        <FacebookIcon />
        <FacebookIcon color="primary" fontSize="small" />
        <FacebookIcon color="primary" fontSize="large" />
        <FacebookIcon color="primary" sx={{ fontSize: 40 }} />
      </Stack>
    </Container>
  );
}

react mui 5 facebook icon

2. react mui 5 material ui social media facebook outlined rounded icons.

import * as React from "react";
import Stack from "@mui/material/Stack";
import { Container } from "@mui/material";
import FacebookOutlinedIcon from "@mui/icons-material/FacebookOutlined";

export default function MaterialIcon() {
  return (
    <Container maxWidth="md" sx={{ mt: 8 }}>
      <Stack direction="row" alignItems="center" spacing={2}>
        <FacebookOutlinedIcon color="primary" />
        <FacebookOutlinedIcon color="primary" fontSize="large" />
        <FacebookOutlinedIcon color="primary" sx={{ fontSize: 52 }} />
      </Stack>
    </Container>
  );
}

react mui 5 material ui facebook icon

3. react mui 5 material ui social media icon with YouTubeIcon, FacebookIcon, TwitterIcon, PinterestIcon, LinkedInIcon.

import * as React from "react";
import Stack from "@mui/material/Stack";
import { Container } from "@mui/material";
import InstagramIcon from "@mui/icons-material/Instagram";
import YouTubeIcon from "@mui/icons-material/YouTube";
import FacebookIcon from "@mui/icons-material/Facebook";
import TwitterIcon from "@mui/icons-material/Twitter";
import PinterestIcon from "@mui/icons-material/Pinterest";
import LinkedInIcon from "@mui/icons-material/LinkedIn";

export default function MaterialIcon() {
  return (
    <Container maxWidth="md" sx={{ mt: 8 }}>
      <Stack direction="row" alignItems="center" spacing={4}>
        <InstagramIcon fontSize="large" sx={{ color: "#E1306C" }} />
        <YouTubeIcon fontSize="large" sx={{ color: "#FF0000" }} />
        <FacebookIcon color="primary" fontSize="large" />
        <TwitterIcon fontSize="large" sx={{ color: "#1DA1F2" }} />
        <PinterestIcon fontSize="large" sx={{ color: "#E60023" }} />
        <LinkedInIcon fontSize="large" color="primary" />
      </Stack>
    </Container>
  );
}

react material ui icon

4. react mui 5 material ui social media icon with button.

import * as React from "react";
import { Button, Container } from "@mui/material";
import FacebookIcon from "@mui/icons-material/Facebook";

export default function MaterialIcon() {
  return (
    <Container maxWidth="md" sx={{ mt: 8 }}>
      <Button variant="contained" startIcon={<FacebookIcon />}>
        Shared
      </Button>
    </Container>
  );
}