Brands & social

Using brand symbols with context

Brand marks help visitors recognize a service, social destination, or integration. Their value comes from familiarity, so preserving proportions and recognizable details is especially important. A catalog entry is a useful starting asset, not proof of a partnership, certification, or endorsement. Describe the relationship honestly in the surrounding text.

Before placing a mark on a commercial website, review the brand owner's usage guidance where relevant. The license covering a drawing and the trademark rights associated with its subject are separate considerations. Keep a record of the source file and any instructions that apply to its presentation. If you cannot establish appropriate permission for a sensitive use, choose a neutral symbol instead.

Social links should identify their destination with an accessible name, particularly when the logo is the only visible content. Use a real link and a clear focus state. Do not make a brand icon look like an interactive button when it is only a decorative reference. Conversely, do not leave a clickable mark so small that it is difficult to use on a phone.

Test logos on the actual background before exporting a colored variation. A mark that is readable on white can disappear in a dark footer, and a monochrome treatment may not be appropriate for every brand. Keep adequate clear space and avoid stretching a wide mark into a square. When several brands appear in a row, balance their apparent size rather than forcing identical visible widths at the expense of their proportions.

When laying out payment methods, start from the methods the store actually accepts. Make a short row of the approved marks and check each against the payment panel's background. A long, horizontal wordmark may need a wider space than a square symbol. Align the row by apparent height without stretching the artwork. If a payment method is unavailable in a particular market, remove or explain that option so the icon accurately describes what the customer can use.

Prepare a useful export

Choose a sample above to open the editor. Review its size, color, and stroke against the background where it will be used. Keep an editable SVG when your destination supports vectors, or export a PNG at an appropriate resolution. Check the result in the real layout and retain applicable source notices with your project.

Explore the icon guides for examples and troubleshooting, or return to all collections to compare related symbols.