Adjusting Logo and Icon Display

Logos and icons appear across many sections of a Flint page - the navigation bar, logo walls, feature sections, and footers. This guide covers how to adjust their size, color, spacing, and presentation.

To resize a logo on your page, describe the change in the AI chat:

Make the logos in the customer logo bar 20% smaller.

Or select the logo on the canvas and describe the size you want:

Resize this logo to 120px wide.

For the main site logo in the navigation bar, you can ask Flint to adjust its size relative to the nav height.

Logo walls often look more visually consistent when logos are displayed in grayscale or a single brand color. To apply this:

Make all logos in the partner logo section grayscale.

Or to match a specific tonal treatment:

Tint the logos in the integration section to a dark navy color to match the section background.

You can also ask to restore logos to their original colors:

Remove the grayscale filter from the customer logos and show them in their original brand colors.

To replace a logo with a new or updated version:

1. 1.Upload the new logo file by clicking the attachment icon in the AI chat
2. 2.Tell Flint which logo to replace:

Replace the Acme Corp logo in the partner section with the attached file.

Alternatively, Flint can fetch logos directly from company domains:

Add the Stripe and Salesforce logos to the integration section. Fetch them automatically.

For icons used in feature sections, lists, or cards:

• •Resize - "Make the icons in the features grid 32px"
• •Recolor - "Change the icon color in the benefits section to match our brand blue"
• •Change icon style - "Replace the filled icons in the feature list with outline-style icons"
• •Add spacing - "Add more spacing between the icon and the text label in each feature card"

Flint uses SVG icons, which scale cleanly at any size.

If logos in a logo wall appear misaligned or have inconsistent spacing:

Align all logos in the partner section to the same height and add equal spacing between them.

For logos that appear too large or too small relative to each other:

Normalize the logo sizes in the customer logo bar so they all appear visually similar in size.

To add or adjust hover effects on logos (commonly used in logo walls):

Add a subtle fade-in-to-full-color hover effect on the logos in the partner section. They should start at 60% opacity and animate to full opacity on hover.

You might notice that changing the color of an icon in your features section is easy, while changing the color of a partner logo is more limited. This comes down to how each type of image is added to the page.

Icons (the small graphics in feature lists, cards, and navigation) are typically embedded directly into the page as editable shapes. Every part of the icon is individually accessible, so Flint can recolor them precisely — change the stroke, fill, or even individual elements within the icon.

Logos (your own site logo, partner logos, customer logos) are usually added as image files, similar to how a photo is placed on a page. The browser displays them as a whole picture, so individual colors within the logo are not separately accessible. You can apply overall visual effects — grayscale, fading, flipping to light or dark — but you cannot change one specific color within the logo without uploading an edited version of the file.

This is why Flint asks you to upload a logo file if you want a very specific color match, rather than being able to recolor it on the fly.

For logos (image files)

• •Make them grayscale — removes all color so logos look uniform. Ideal for logo walls where you want a calm, consistent look.

Make all logos in the partner section grayscale.

• •Fade them out — reduces how vivid or prominent a logo appears without changing its color.

Fade the logos to 60% so they feel more subtle.

• •Flip to light or dark — if a dark logo disappears on a dark background, ask for the light version.

Use the light version of each logo for this dark section.

• •Make all-black or all-white — useful on colored backgrounds where you want a clean, single-tone look.

Make the logos in this section all white.

For icons (embedded graphics)

Icons have full color control. Just describe what you want:

Change the icon color in the benefits section to our brand blue.

Make the icons in the feature grid outlined instead of filled.

Flint will handle the right approach automatically based on what type of element you're working with.

A logo disappears on a dark background
Logos designed for light backgrounds often have dark or transparent areas that make them invisible when placed on a dark section. Ask Flint to use the light version of the logo, or to make it white.

Grayscale and fading are not the same thing
Grayscale removes all color but keeps the logo fully solid. Fading (reducing opacity) makes the logo semi-transparent so the background shows through. You can use both at once:

Make the logos in the partner section grayscale and slightly faded.

Inverting colors on a colorful logo rarely looks right
Flipping colors works well on logos that are already fully black or white (it turns black into white and vice versa). On a multi-color logo, it replaces every color with its visual opposite, which usually looks wrong. Grayscale is a safer choice for most logos.

Some logos can't be recolored to an exact custom color
If you need a logo in your exact brand color (rather than grayscale or white), the most reliable path is to upload an edited version of the logo file. Flint can attempt to approximate a tint, but results vary depending on how the original logo was designed — simple flat logos tint well, complex ones may not.

For adjusting the favicon (the icon shown in browser tabs), see the Favicon and Social Preview Image guide.