fix(icons): repair broken integration icon rendering by waleedlatif1 · Pull Request #4810 · simstudioai/sim

waleedlatif1 · 2026-05-30T05:49:50Z

Summary

Fixed 6 integration icons (Notion, Greptile, Granola, Calendly, Grafana, Bedrock) that rendered as fragments or blank on the /integrations page. Their SVG paths were over-minified — elliptical-arc flag digits were dropped (e.g. A1 1 0 5.9 7 instead of A1 1 0 0 0 5.9 7; Granola's cubic stream was truncated), so browsers aborted path parsing at the first bad flag. Replaced with correct path data from canonical sources, preserving each icon's existing fill/gradient and bgColor.
Fixed Bright Data rendering invisible: its glyph uses fill='currentColor' on a #FFFFFF chip while every surface forces text-white (white-on-white). Changed its bgColor to Bright Data's brand blue (#3d7ffc) so the white glyph reads.
Visible at the integrations page's 32–40px size; was hidden at the toolbar's 16px.

Type of Change

Bug fix

Testing

Rendered each affected icon at 16px and 40px on its chip in headless Chromium to confirm complete, visible logos. Verified only these icon definitions changed and Calendly's white chip was left untouched.

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

Two distinct bugs left integration icons broken on the /integrations page (visible at 32-40px, hidden at the toolbar's 16px): 1. Corrupted SVG paths (Notion, Greptile, Granola, Calendly, Grafana, Bedrock): over-minified data dropped elliptical-arc flag digits (e.g. `A1 1 0 5.9 7` instead of `A1 1 0 0 0 5.9 7`); Granola's cubic stream was truncated. Browsers abort path parsing at the first invalid arc flag, so each rendered as a fragment or blank. Replaced with correct path data from canonical sources, preserving each icon's existing fill/gradient and bgColor. 2. Invisible glyph (Bright Data): its icon uses fill='currentColor' but bgColor was '#FFFFFF', and every surface forces text-white on the glyph - white-on-white. Changed bgColor to Bright Data's brand blue (#3d7ffc) so the white glyph reads, matching the white-glyph-on-brand-chip convention. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel · 2026-05-30T05:49:56Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
docs	Ready	Preview, Comment	May 30, 2026 6:44pm

cursor · 2026-05-30T05:50:00Z

PR Summary

Low Risk
Visual-only SVG and marketing/block color metadata; no runtime logic, auth, or data handling changes.

Overview
Fixes broken or invisible integration logos on the integrations UI by correcting SVG artwork and one chip background color.

Several icons (Notion, Grafana, Calendly, Granola, Greptile, and the gradient Bedrock-style glyph) had invalid or truncated path data (e.g. missing elliptical-arc flags), so browsers stopped drawing them. Those paths are replaced with valid geometry while keeping existing fills, gradients, and viewBox sizing where applicable.

Bright Data was effectively invisible because currentColor rendered white on a white (#FFFFFF) chip. Its bgColor is set to brand blue (#3d7ffc) in the block config and landing integrations data so the white glyph contrasts correctly.

^{Reviewed by Cursor Bugbot for commit b64089d. Configure here.}

greptile-apps · 2026-05-30T05:52:23Z

Greptile Summary

This PR fixes rendering regressions in 7 integration icons by replacing over-minified or truncated SVG path data with correct path data from canonical sources, and fixes the Bright Data icon's invisible white-on-white rendering by changing its chip background to the brand blue.

SVG path fixes for Notion, Grafana, Granola, Greptile, Bedrock, and Calendly: paths had dropped arc-flag digits or truncated cubic streams, causing browsers to abort path parsing. Replaced with complete, valid path data while preserving each icon's existing fill colours and gradient definitions. Both apps/sim/components/icons.tsx and apps/docs/components/icons.tsx received identical changes.
Bright Data visibility fix: bgColor changed from #FFFFFF to #3d7ffc in both brightdata.ts and integrations.json, so the currentColor glyph (white) renders legibly on the brand-blue chip instead of disappearing on white.
Calendly cleanup: the old definition contained a duplicate fill='#0ae8f0' path; the replacement correctly renders the dual-tone mark with a single cyan path.

Confidence Score: 5/5

Safe to merge — all changes are isolated SVG path data and colour corrections with no logic, API, or data-model impact.

Every changed line is either SVG path geometry, a viewBox attribute, a gradient coordinate, or a bgColor string. Both apps/sim and apps/docs icon files were updated in lockstep. The Bright Data bgColor is updated consistently in both the block definition and the integrations JSON. No shared utilities, state, or API contracts were touched.

No files require special attention.

Important Files Changed

Filename	Overview
apps/sim/components/icons.tsx	SVG path data corrected for 6 icons (Notion, Grafana, Calendly, Granola, Greptile, Bedrock); Grafana gradient updated to objectBoundingBox; Calendly dual-tone restored and duplicate #0ae8f0 path removed
apps/docs/components/icons.tsx	Identical icon fixes applied as in apps/sim/components/icons.tsx, keeping both files in sync
apps/sim/blocks/blocks/brightdata.ts	bgColor updated from #FFFFFF to #3d7ffc so the white currentColor glyph is visible against the brand-blue chip background
apps/sim/app/(landing)/integrations/data/integrations.json	Bright Data bgColor updated from #FFFFFF to #3d7ffc to match the block definition and fix the white-on-white rendering

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Icon broken / invisible on /integrations page] --> B{Root cause}
    B --> C[SVG path data\nover-minified / truncated]
    B --> D[BrightData: white glyph\non white background]
    C --> E[Replace path data with\ncorrect canonical source]
    D --> F[Change bgColor\n#FFFFFF → #3d7ffc]
    E --> G[apps/sim/components/icons.tsx\nNotionIcon, GrafanaIcon,\nCalendlyIcon, GranolaIcon,\nGreptileIcon, BedrockIcon]
    E --> H[apps/docs/components/icons.tsx\nIdentical changes - kept in sync]
    F --> I[apps/sim/blocks/blocks/brightdata.ts]
    F --> J[apps/sim/app/landing/integrations/data/integrations.json]
    G --> K[Icons render correctly at 16px & 40px]
    H --> K
    I --> K
    J --> K

_{Reviews (2): Last reviewed commit: "fix(icons): restore Calendly dual-tone b..." | Re-trigger Greptile}

Addresses review feedback: the previous fix replaced the broken Calendly icon with a monochrome #006BFF path, dropping the cyan #0ae8f0 accent from the original dual-tone mark. Restored the two-tone logo (blue + cyan) using clean, valid path data, cropped to a tight square viewBox so it fills the chip. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

waleedlatif1 · 2026-05-30T17:08:02Z

@greptile

waleedlatif1 · 2026-05-30T17:08:05Z

@cursor review

cursor

✅ Bugbot reviewed your changes and found no new issues!

Comment @cursor review or bugbot run to trigger another review on this PR

^{Reviewed by Cursor Bugbot for commit b64089d. Configure here.}

- Zoom: glyph was blue-on-blue (#0B5CFF on #2D8CFF chip); switched to currentColor so it renders as a white glyph on the blue chip. - Quiver: chip bgColor #000000 -> #FFFFFF to match the icon's near-white box, and enlarged the mark slightly (viewBox crop). - Enlarged (tightened viewBox, verified no clipping): RevenueCat, Prospeo, Granola, Firecrawl, Enrich.so, and the AWS icons (RDS, DynamoDB, SQS, CloudFormation, Athena, CloudWatch, SES, Bedrock, S3). - ZoomInfo left unchanged: it is a full red rounded-square logo that already fills its frame, so a crop would clip it. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Bright Data: replaced the flame glyph with the official two-tone 'bright data' wordmark (provided asset), centered in a symmetric viewBox. Reverted the chip bgColor from #3d7ffc to #FFFFFF since the blue wordmark is invisible on a blue chip (the wordmark is designed for a light background). - Circleback: a minifier had rounded the pattern's image scale to scale(0), collapsing the embedded logo to zero size (invisible). Restored the correct scale (1/280 = 0.00357142857) so the C. mark renders. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Reflects the Quiver bgColor change (#000000 -> #FFFFFF) in the docs block info card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

… Zoom - Enlarged (tighter viewBox, render-verified, no clipping): Cloudflare, Dagster, and the red AWS icons AWS IAM, Identity Center, Secrets Manager, SES, STS. Identity Center was anomalously small (filled ~32% of its frame); the group is now sized consistently (~80% fill). - Zoom: the camera lens triangle was still #0B5CFF (blue-on-blue); switched it to currentColor so the whole camera renders white on the blue chip. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Merges the separate Start/Get Individual Reveal operations into one Individual Reveal operation in the Wiza docs and integrations data (operationCount 5 -> 4). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

…ill) Bring RDS, DynamoDB, SQS, CloudFormation, Athena, CloudWatch and S3 up to the same ~80% fill as the AWS IAM/Identity Center/Secrets Manager/SES/STS group, so all AWS icons are visually consistent. Bedrock left as-is (already ~92% fill). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

- Bright Data: the full 'bright data' wordmark was illegible at chip size. Replaced with just the flame-'i' brand mark (blue #4280f6 on the white chip), centered. - ZoomInfo: cropped the viewBox toward the white 'Zi' so it's larger; the red rounded-square background still fills the chip. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

The falcon mark sat small in its chip because the icon used a wide 768x500 viewBox (letterboxed in the square chip). Switched to a square viewBox centered on the mark so it fills ~80%, consistent with the other icons. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

greptile-apps Bot reviewed May 30, 2026

View reviewed changes

Comment thread apps/sim/components/icons.tsx

Comment thread apps/docs/components/icons.tsx

vercel Bot deployed to Preview May 30, 2026 05:53 View deployment

cursor Bot reviewed May 30, 2026

View reviewed changes

Comment thread apps/sim/components/icons.tsx

vercel Bot deployed to Preview May 30, 2026 06:34 View deployment

cursor Bot reviewed May 30, 2026

View reviewed changes

vercel Bot deployed to Preview May 30, 2026 17:40 View deployment

vercel Bot deployed to Preview May 30, 2026 17:45 View deployment

fix(docs): sync Quiver block color card to white chip

eed32c9

Reflects the Quiver bgColor change (#000000 -> #FFFFFF) in the docs block info card. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview May 30, 2026 18:06 View deployment

waleedlatif1 and others added 2 commits May 30, 2026 11:13

docs(wiza): consolidate individual reveal into a single operation

a579522

Merges the separate Start/Get Individual Reveal operations into one Individual Reveal operation in the Wiza docs and integrations data (operationCount 5 -> 4). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

vercel Bot deployed to Preview May 30, 2026 18:17 View deployment

vercel Bot deployed to Preview May 30, 2026 18:22 View deployment

vercel Bot deployed to Preview May 30, 2026 18:34 View deployment

waleedlatif1 merged commit c6d500d into staging May 30, 2026
8 of 9 checks passed

waleedlatif1 deleted the waleedlatif1/integrations-page-render-bug branch May 30, 2026 18:44

vercel Bot deployed to Preview May 30, 2026 18:44 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(icons): repair broken integration icon rendering#4810

fix(icons): repair broken integration icon rendering#4810
waleedlatif1 merged 10 commits into
stagingfrom
waleedlatif1/integrations-page-render-bug

waleedlatif1 commented May 30, 2026

Uh oh!

vercel Bot commented May 30, 2026 •

edited

Loading

Uh oh!

cursor Bot commented May 30, 2026 •

edited

Loading

Uh oh!

greptile-apps Bot commented May 30, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

waleedlatif1 commented May 30, 2026

Uh oh!

waleedlatif1 commented May 30, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

waleedlatif1 commented May 30, 2026

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel Bot commented May 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor Bot commented May 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

greptile-apps Bot commented May 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Flowchart

Uh oh!

Uh oh!

Uh oh!

Uh oh!

waleedlatif1 commented May 30, 2026

Uh oh!

waleedlatif1 commented May 30, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

vercel Bot commented May 30, 2026 •

edited

Loading

cursor Bot commented May 30, 2026 •

edited

Loading

greptile-apps Bot commented May 30, 2026 •

edited

Loading