figma guide
Figma boolean operations: unite, subtract, intersect, and exclude for icons and UI
Master Figma boolean operations to build icons, badges, and custom shapes—when to flatten, how to keep vectors editable, and export rules for crisp SVG handoff.
- Published
- Updated
- Jun 04, 2026
- Read time
- 6 min
- Level
- Beginner
Quick answer
Boolean operations in Figma merge vector shapes into one path using Union (unite), Subtract, Intersect, or Exclude. Select two or more shapes → right panel Boolean groups (or ⌥⌘U / ⌥⌘S etc. on Mac). Use them to build icons, tab indicators, notches, and custom clips—then flatten only when you need a single export path. Keep booleans live while iterating; flatten before SVG export if engineers need one path. For image cropping use masks instead; for logos see modern logo workflow. More beginner guides on the Figma guides hub.
Who this is for
- UI designers building simple icons without Illustrator.
- Design system contributors maintaining outline icons at consistent stroke weights.
- Developers receiving SVG that must not ship as five separate overlapping paths.
The four boolean operations (what each one does)
| Operation | Result | Typical use |
|---|---|---|
| Union (Unite) | Combined outer silhouette | Merge icon parts; solid pictograms |
| Subtract | Top shape cuts hole in bottom | Donut, crescent, tab notch |
| Intersect | Only overlapping area remains | Lens flare, masked vector without mask layer |
| Exclude (XOR) | Overlap removed, outer kept | Ring, outlined band, dual-path icons |
Layer order matters for Subtract: the top shape subtracts from the bottom. Wrong order flips the hole.
Quick comparison: boolean vs mask vs clip
| Technique | Input types | Editable after? | Best for |
|---|---|---|---|
| Boolean | Vectors (and most shapes) | Yes, until flattened | Icons, custom UI chrome |
| Mask | Any layers | Yes, with mask group | Photos, gradients in shape |
| Clip content | Frame children | Yes | Rectangular UI regions |
See the full breakdown in masks and clipping.
Step-by-step: build a notification bell icon with subtract
- Draw a rounded rectangle for the bell body.
- Draw a circle for the clapper; position overlapping the bell bottom.
- Select both → Subtract (clapper cuts from bell).
- Draw a small rectangle for the top knob → Union with the bell.
- Set stroke to center or inside for outline style; align stroke width to your 8pt icon grid.
Verdict: build with simple primitives first—complex pen paths are harder to boolean cleanly.
Union workflow for solid (filled) icons
- Set all parts to the same fill token (semantic color).
- Align to pixel grid (whole X/Y values at 1×).
- Select parts → Union.
- Optional: Outline stroke plugin or expand stroke if design system uses fills only.
| Icon style | Stroke before boolean? | After union |
|---|---|---|
| Filled | Convert stroke to outline or draw filled shapes | Single fill path |
| Outlined | Boolean first, then one stroke on group | May need flatten for export |
| Duotone | Use separate booleans per color layer | Two groups, not one union |
Pair finished icons with best icon sets and plugins when you are not building from scratch.
When to flatten (and when not to)
| Situation | Flatten? |
|---|---|
| Shipping SVG to production | Often yes—one path per color |
| Library component still iterating | No—keep boolean group live |
| Boolean + stroke on group | Flatten or outline stroke before export |
| Animator handoff | Ask dev—some stacks want layered SVG |
Flatten = ⌘E (Mac) on selection—destroys edit history of individual parts. Duplicate before flattening.
Export and handoff rules
| Format | Guidance |
|---|---|
| SVG | Export boolean group; if dev sees gaps, flatten and re-export at 1× |
| PNG | Export at 2× and 3×; booleans rasterize cleanly if pixel-aligned |
| PDF print | Flatten complex booleans to avoid RIP surprises (print checklist) |
Document in Dev Mode: icon grid (16/20/24), stroke width, and whether SVG should be outline or fill. Cross-link production export guide and blurry export fixes if assets look soft.
Boolean + components (design system pattern)
- Create icon as boolean group inside a 24×24 frame.
- Turn frame into component
icon / bell. - Use color variables on fill—not hardcoded hex—so dark mode swaps work.
- For variants (filled vs outline), use separate boolean sources or swap nested instances.
Do not boolean raster images—import vectors via Illustrator / SVG cleanup first.
Troubleshooting booleans
| Problem | Cause | Fix |
|---|---|---|
| Unexpected sliver shapes | Off-pixel alignment | Snap to pixel grid; nudge 0.5px |
| Subtract “inverted” | Layer order | Send cutting shape to top |
| Fuzzy SVG edge | Sub-pixel coordinates | Round X/Y/W/H to integers |
| Hole disappeared after union | Paths not overlapping | Overlap at least 1px |
| Stroke looks uneven after boolean | Stroke on individual shapes | Union first, one stroke on result |
| Can’t boolean | Text or component instance | Outline text; detach or enter instance |
Icons vs UI chrome (where booleans shine)
| Use case | Operation | Note |
|---|---|---|
| Tab active indicator | Union + corner radius | Combine pill + triangle |
| Custom speech bubble tail | Union | Single fill for CSS |
| Progress ring segment | Subtract | Circle minus mask arc |
| Avatar status badge | Union | Badge + circle border |
| Complex illustration | Rarely boolean | Use masks or illustration plugins (icons & illustrations plugins) |
For photos inside circles, prefer masks—booleans on bitmaps do not apply.
Keyboard shortcuts (Mac; Windows uses Ctrl)
| Action | Shortcut |
|---|---|
| Union | ⌥⌘U |
| Subtract | ⌥⌘S |
| Intersect | ⌥⌘I |
| Exclude | ⌥⌘E |
| Flatten | ⌘E |
Add these to your keyboard shortcuts workflow.
Common mistakes
| Mistake | Consequence | Fix |
|---|---|---|
| Boolean on misaligned half pixels | Blurry exports | Pixel-preview + integer positions |
| Flatten too early | Can’t tweak icon parts | Duplicate component before flatten |
| Union everything including hidden layers | Bloated SVG | Delete hidden paths first |
| Mixing stroke weights before union | Uneven outline | Standardize stroke, then boolean |
| One giant boolean for 40 icons | Slow library | One component per icon |
FAQ
Does boolean work with auto layout frames?
No—booleans apply to vector-compatible layers. Auto layout frames should wrap the icon component, not participate in the boolean.
Union vs group—what is the difference?
A group only organizes layers. Union merges geometry into one vector path.
Can I undo a boolean?
Yes, until you flatten. After flatten, revert with version history or duplicate backups.
Should developers recreate booleans in code?
Usually no—ship SVG or icon font. Booleans are a design-time tool unless the dev stack imports SVG paths directly.
Bottom line
Use Union to merge icon parts, Subtract for holes and notches, Intersect and Exclude for specialized shapes—then flatten for export when engineers need clean SVG. Keep operations live during exploration, align to your icon grid, and pair with masks when the content is raster. Next: icon plugins roundup, logo design basics, and the tutorials hub.
§ Keep reading