Dynamic social media component w/ dark mode
consider using The strict equality operator (===) over the abstract equality operator (==) , see == VS ===

avoid nested if blocks using optional chaining , it can get pretty messy if you have a lot of nested properties, it's a relatively new feature but you can always use a babel plugin.

consider a different aproach to styling ( i recommend styled-components ), adding styles like that would affect other components on the same page.

since the images urls' are hardcoded , use an object to toggle dark mode

keep your code DRY , you can use an Array of social media names and loop through it to display the icons

for counting the props , you could use Object.keys or if you have other props to pass along the social media icons, use Array.filter to check how many are there and grab the resulting array's length


snippet of the end result :
import styeld from &quot;styled-components&quot;;

const Wrapper = styled.div`
  .social {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
  }

  .social img {
    max-height: 25px;
    margin: 0 15px;
  }
`;

const icons = {
  darkMode: {
    facebook: &quot;facebook_white&quot;,
    twitter: &quot;twitter_white&quot;,
    instagram: &quot;instagram_white&quot;
  },

  lightMode: {
    facebook: &quot;facebook&quot;,
    twitter: &quot;twitter&quot;,
    instagram: &quot;instagram&quot;
  }
}

const options = [&quot;facebook&quot;, &quot;twitter&quot;, &quot;imstagram&quot;];

const Social = props =&gt; {
  // check for dark mode
  const mode = props.dark ? &quot;darkMode&quot; : &quot;lightMode&quot;;

  // count social media icons 
  const count = option.filter(option =&gt; props[option]?.url ? true : false).length();

  return (
    &lt;Wrapper&gt;
      &lt;div className=&quot;social&quot;&gt;
        {/* show the text if there's at least one social media is supplied */}
        {count &gt; 1 ? &lt;span&gt;Follow us on:&lt;/span&gt; : ``}

        {
          // loop through the social media array to display the ones available in props
          options.map(option =&gt; props[option]?.url 
            ? &lt;a href={props[option]?.url}&gt;
               &lt;img src={`./assets/social/${icons[mode].facebook}.svg`} alt={option} /&gt; 
              &lt;/a&gt; 
           : null)
        }

      &lt;/div&gt;
    &lt;/Wrapper&gt;

  )
};

export default Social;