Does MUI have a Tiktok Icon?

Question

I am trying to add social media icons to my react website dynamically and I have found icons for Facebook, Instagram, Youtube and Twitter. But I cant add the TikTok logo.

The MUI react material icons directory (see here) doesn't seem to have a TikTok Icon however this website seems to reference that there is one.

When trying to import the icon however it says it does not exist. Here is a sample of my code:

import { Instagram, TiktokIcon, Facebook, YouTube, Twitter } from "@mui/icons-material"


    export const socialMediaLinks = [
    {
        platform: 'Instagram',
        link: '',
        icon: <Instagram/>
    },
    {
        platform: 'Tiktok',
        link: '',
        icon: <TiktokIcon/>
    },
    {
        platform: 'Facebook',
        link: '',
        icon: <Facebook/>
    },
    {
        platform: 'Youtube',
        link: '',
        icon: <YouTube/>
    },
    {
        platform: 'Twitter',
        link: '',
        icon: <Twitter/>
    }
]

{socialMediaLinks.map((social) => (
                <a href={social.link}>
                  <Icon>
                    {social.icon}
                  </Icon>
                </a>
              ))}

in this code all the other icons appear, apart from the TikTok one.

Is there a way to do this straight from MUI Icons or do I have to import the TikTok Icon from elsewhere? I don't particularly want to do this as it makes it harder to keep formatting consistent.

score 5 · Answer 1 · answered Jun 24 '22 at 09:46

MUI doesn't include TikTok logo currently. But you can create externally.

Create TiktokIcon component

 const TikTokIcon = ({ color = "#000000" }) => {
  return (
    <svg
      fill={color}
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 50 50"
      width="100%"
      height="100%"
    >
      <path d="M41,4H9C6.243,4,4,6.243,4,9v32c0,2.757,2.243,5,5,5h32c2.757,0,5-2.243,5-5V9C46,6.243,43.757,4,41,4z M37.006,22.323 c-0.227,0.021-0.457,0.035-0.69,0.035c-2.623,0-4.928-1.349-6.269-3.388c0,5.349,0,11.435,0,11.537c0,4.709-3.818,8.527-8.527,8.527 s-8.527-3.818-8.527-8.527s3.818-8.527,8.527-8.527c0.178,0,0.352,0.016,0.527,0.027v4.202c-0.175-0.021-0.347-0.053-0.527-0.053 c-2.404,0-4.352,1.948-4.352,4.352s1.948,4.352,4.352,4.352s4.527-1.894,4.527-4.298c0-0.095,0.042-19.594,0.042-19.594h4.016 c0.378,3.591,3.277,6.425,6.901,6.685V22.323z" />
    </svg>
  );
};

Add it to your project

const App = () => {
  return (
    <div>
      <div style={{ width: "40px" }}>
        <TikTokIcon />
      </div>
      <div style={{ width: "80px" }}>
        <TikTokIcon color="red" />
      </div>
      <div style={{ width: "120px" }}>
        <TikTokIcon color="blue" />
      </div>
    </div>
  );
};

You can try this.

score 0 · Answer 2 · answered Jun 23 '22 at 18:05

0

Unfortunately, the icon of tiktok application is not available in MUI like other social media applications.

answered Jun 23 '22 at 18:05

Digimhotep

56
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jun 24 '22 at 20:30

Does MUI have a Tiktok Icon?

2 Answers2