Figma integration icons

An integrations page is a wall of other people’s logos. That is the awkward part of designing one. The marks were drawn by other teams, at other sizes, with their own opinions about padding, and your job is to line thirty of them up in a grid without any single one shouting.

This set draws every mark inside a shared 20x20px box so that GitHub’s solid black circle and Tailwind’s thin wave carry the same optical weight in the same row. You see these icons in integration directories, in the connected accounts list inside settings, in the row that says "Connected 3 days ago", in changelog entries, and in the select menu where someone picks which repo to deploy from.

Two properties, and that is the entire component

The set is one component with 32 variants, driven by two properties. Integration names the brand. Grayscale is true or false. Nothing else. That flatness is the point: any instance becomes any other brand from a dropdown in the right panel, so building an integrations grid is placing one icon, styling the card around it, then duplicating and switching the property.

Among the brands in the set are GitHub, Figma, React, Tailwind CSS, Next.js, Vite, Cursor, Replit, Claude, ChatGPT, Gemini, and Perplexity, which is roughly the list a developer-facing product needs today rather than the list that made sense in 2019.

Grayscale is doing real work

The same mark has two jobs in the same product. In a directory card or a connected account row, color is the whole point, because color is how someone finds Figma in a list of forty without reading a single label. In a logo strip under a hero, or in a row for an integration that your plan does not include, color fights everything around it and pulls attention to a thing the user cannot act on.

That is what the Grayscale property is for: disconnected states, coming-soon rows, quiet proof strips, and any layout where the brand color would win an argument it should not be in. Keep the label either way. Nielsen Norman Group’s work on icon usability is blunt about this, and brand marks are worse than generic icons here, since half of them are an abstract shape with no word attached.

The wider app icon board

The same page carries a second, much larger board of app marks at 32x32px, grouped into browsers, social networks, messengers, coding tools, productivity apps, design tools, operating systems, video, music, and finance. Zoom, Jira, Dropbox, Zendesk, Stripe, Slack and several hundred others live there.

It is the grab bag for the integration your mockup needs that no design system would build a variant for, and the categories mean you can find one without scrolling the whole board. For the generic non-brand icons that sit beside them in the same UI, the free icon library covers the interface side, and placeholder company logos handle the fake customers on a marketing page.

Alignment, export, and the trademark part

Because every variant occupies the same 20x20px frame, these drop into an Auto Layout row without knocking the text baseline around, which is the failure mode of pasting logos straight from a press kit. If you nest one inside your own card component, expose it with an instance swap property so a teammate can change the brand without entering the component, which Figma’s guide to component properties walks through.

One practical caution: these are other companies’ trademarks. Most publish brand guidelines covering minimum sizes and whether you may recolor the mark, and a few of them care a great deal. Worth a two-minute check before an integrations page goes to print.