What you need
- The Pro plan. The Framer / Webflow embed snippet is a Pro export; see pricing.
- In the workbench, upload your logo, pick an effect, click Export Code, open the Framer / Webflow tab and copy the code (the file is named
framer-webflow-embed.html). - The snippet fills the container it is pasted into and is at least 420 px tall, so give the embed element enough room.
Add it to Framer
- In Framer, open the Insert menu, search for Embed and drag the Embed component onto the canvas.
- Paste the snippet into the HTML section of the Embed component. Framer's help center describes scripts going in that HTML section (Framer help).
- Resize the component and check the animation in Framer's preview.
Add it to Webflow
- In the Designer, add a Code Embed element from the Add panel where the logo should appear.
- Paste the snippet and save.
- Publish the site and check the animation on the live page.
Webflow limits the custom code in a Code Embed element to 50,000 characters (Webflow Help Center and Webflow's update note). If the snippet is longer, put the code somewhere else, as described next.
What if the snippet is longer than 50,000 characters?
The snippet contains all of your logo's points. A point that carries its own color is written like [120.2,196,"rgb(34, 197, 94)"], about 31 characters; the code itself is about 14,000 characters; and the snippet holds up to 1,600 points. So colorful logos are the ones that go over the limit. We measured three test logos on November 3, 2026 at the default step of 4 (the character counts include the code):
- White wordmark (one color): about 21,414 characters
- The Particle Logo mark (one silver tone): about 34,727 characters
- Five-color geometric mark: about 65,509 characters, over the 50,000 limit
Sampling adds a tiny random offset to every point, so exporting the same logo again changes the length by a few hundred characters at most. There are two ways around the limit:
Option A: host the HTML file elsewhere and embed it with an iframe (most reliable)
Export the free HTML5 tab, upload index.html to any static host, and put this in a Webflow Code Embed. It is under 200 characters:
<iframe src="https://example.com/particle-logo/index.html" title="Animated logo"
width="480" height="520" style="border:0;max-width:100%" loading="lazy"></iframe>In Framer, set the Embed component's type to URL and enter the page's address. Framer's help center warns that some websites block being embedded through HTTP headers (Framer help), so make sure your host does not send headers that forbid iframes.
Option B: reduce the number of points
Raise the sampling step in the workbench. Code exports keep at most 1,600 points, so the snippet does not get shorter until the workbench's point count drops below that. This is what we measured for the five-color mark:
| Sampling step | Points sampled | Snippet length (characters) | Under 50,000? |
|---|---|---|---|
| 4 | 4,139 | 65,332 | No |
| 6 | 1,848 | 65,448 | No |
| 8 | 1,032 | 47,114 | Yes |
| 10 | 663 | 35,121 | Yes |
For this logo the snippet only dropped under 50,000 at step 8, with about 1,032 points. Fewer points make the outline sparser, so check the result in the workbench preview.
Is this related to the Particle Logo component in the Framer community?
No. A free component named "Particle Logo" by Alex Lara exists in Framer's community. It is a separate product and is not affiliated with the Particle Logo website.
Common questions
Can I use the Framer / Webflow snippet on the free plan?
No, the embed snippet requires Pro. The free plan can export the HTML file, which you can embed with an iframe as in option A.
What about other site builders?
The snippet is plain HTML and JavaScript, so any builder that lets you paste custom code may work. We only checked the official documentation for Framer and Webflow and did not test other builders.
Where do I go next?
See the iframe approach in the HTML guide, or browse all integration guides.