Our social icons are provided by fontawesome. You should only be using these for social icons. For other icons, use the [icon component](#/Components/Icon).

Here's a list of available social icons:

```jsx
import { icons } from './icons';

<div className="grid grid-cols-4 md:grid-cols-8">
{icons.map(icon => {
  return (
    <div key={icon.iconName} className="h-20 grid place-content-center">
      <div className="flex flex-col gap-1 justify-center items-center">
        <SocialIcon name={icon.iconName} />
        <div className="text-xs text-gray-600">{icon.iconName}</div>
      </div>
    </div>
  )
})}
</div>
```