Figma social icons
Social icons in Figma: platforms, grayscale, and hover states
A row of social icons is one of the few places where a product deliberately sends people somewhere else. That is worth respecting in the design.
These marks belong in footers, on team member cards, in contact sections and under author bylines, at the size of a footnote rather than a call to action. A social row that outweighs your own primary button is a row that is losing you sessions.
34 platforms at 24x24px
The set covers what product footers actually list: Facebook, Instagram, LinkedIn, X, YouTube, TikTok, Pinterest, Snapchat, Reddit, Tumblr, Twitch, Discord, Telegram, WhatsApp, Signal, Clubhouse, Slack, Notion, Figma, Framer, Webflow, Dribbble, GitHub, AngelList, Layers, Spotify, Apple, Google, Stripe, PayPal and Wise. Every mark is drawn to the same 24x24px box, which is the detail that keeps a footer row optically even despite Twitter being a wide bird and Apple being a tall apple.
Both Twitter and X exist as separate platforms in the set, which is the pragmatic call, and Discord and Framer each offer two mark options so you are not stuck with the version that went out of date.
Grayscale, with a hover state built in
The 102 variants are three passes over the same 34 marks: full color, grayscale, and grayscale hover. The second and third are the ones most designs need. Eight brand palettes in one footer strip will always fight your own, so muting the logos and bringing them back on interaction is the usual answer.
Having hover as a variant rather than a second component means you can wire it once with a change-to interaction, which Figma calls interactive components, and the whole row then behaves in a prototype without further work. Use full color when a logo is the subject rather than the garnish, like a single sign-in option on a log in page.
App icons live in the same file
Sitting beside the social set is a group of app icons drawn at 32x32px and sorted into browsers, social networks, messengers, coding tools, productivity apps, design tools, operating systems, video, music, finance and a catch-all. Those are the marks you reach for in integration directories, comparison tables and support pages about which browser a feature needs.
For AI and developer tooling specifically, the integration icons cover the current crop, and placeholder company logos handle the case where you need something plausible but fictional. Card and wallet marks live in the payment icons set.
Name the destination, not the picture
A social icon is nearly always a link, and a link with only an image inside needs an accessible name describing where it goes. W3C’s tutorial on functional images is direct about this: alt text should convey the action, so "Untitled UI on LinkedIn" rather than "LinkedIn logo".
While you are there, size the hit area rather than the glyph. A 24px mark with 12px of padding around it clears the touch target minimum without changing anything visible.
In the file, all 34 marks are one component set, so a footer row is a single instance repeated with the Platform property changed rather than 12 pasted vectors. When a platform rebrands, and one of them will, that difference is a library update instead of an afternoon in the pen tool with a screenshot open on the second monitor.
Frequently asked questions
Should social icons be full color or grayscale?
Grayscale in a footer, full color when the logo is the point. A footer holds five to ten marks, and ten brand palettes in one strip pulls attention away from everything else on the page.
Grayscale with a hover state keeps the row calm and still confirms the icons are interactive. Full color is right for sign-in buttons and press logos, where recognition is doing the work.
How do I make a social icon change on hover in a Figma prototype?
The grayscale marks include a hover state as a variant, so add a change-to interaction on hover between the default and hover variants inside the component set.
Every instance in the prototype then behaves correctly with no per-instance wiring. Set the animation to a quick smart animate or an instant change; a slow fade on a footer link feels sluggish.
Can I use these logos in a commercial project?
The components are yours to use in your designs, but the marks themselves are trademarks owned by each platform, and their brand guidelines govern how you display them.
In practice that means linking to a real profile, keeping the mark’s proportions, and not recoloring it into your own palette on a page that implies partnership. Grayscale for a footer link is normal and widely accepted.
Are these social icon components free?
Yes. The social icons are included in the 100% free version of Untitled UI, usable in personal and commercial projects.
The full Figma kit extends the same system to 10,000+ components, page examples, and dashboards.
Should I use the Twitter bird or the X mark?
Use X for anything shipping now, since that is the mark on the site and on the app icon people tap.
The bird is still worth having for older brand material, screenshots and case studies you are not going to re-render. Both are in the set as separate platforms, so swapping the whole product over later is a variant change on one component.
Foundation Figma components and styles
Figma base components
Shared Figma assets
Application UI/Dashboard examples
Application UI/Dashboard Figma components
Marketing website examples
What is Untitled UI?
Untitled UI is the best $ I've spent on my business in a long time. I'm going to keep using it and recommending it to every designer I know.
Over the years we've featured hundreds of UI kits on UXCrush, but Untitled UI is by far the most comprehensive and detailed I've seen yet. A must have for any designer!
I've used all UI kits on the market. I can say without a doubt that the Untitled UI kit is the best on the market. It covers everything a designer needs in a modern and efficient way.
Incredible, and keeps getting better. I’ve tried dozens of UI kits and Untitled UI is the only name you should care about. It stands head and shoulders above the rest.
Such a beautiful, detailed, and extensive UI kit. Untitled UI is the perfect foundation for any project. I highly recommend this huge time saver.
Untitled UI has been an amazing resource that I'm learning to rely upon to spin up ideas in no time. I think I might launch a startup pretty soon by mistake here!
The sheer scale, details, and organization of this kit is mind-blowing. It covers nearly everything a Designer could need in a modern, efficient and systematic way.
I'm super impressed with this. I love poking around in other peoples UI Kits to see how they think. This is probably one of the most comprehensive I've seen.
I'm super excited to use this for quick mockups of ideas in Figma. We're always trying to streamline our design process so we can move fast! Definitely recommend.
Untitled UI is easily the best UI kit I've used so far. It has an insane amount of components that are all incredibly well-built. I don't even know how many hours this will save.
The attention to detail and thought Jordan has put into this UI kit is unparalleled.
Untitled UI is incredibly well-organized and the attention to detail is great. I highly recommend this kit to any designer that wants to create beautiful designs fast.
What an awesome Figma kit... it's an absolute game changer. This is the perfect base for any design system. The size and attention to detail is next level.
We've been using Untitled to build Himalayas 2.0 and have finished a complete redesign in just a few days. It has everything we need already pixel-perfect.
