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.

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