---
title: "Knockout Text & SVG — Free Framer component · Best of Framer"
description: "Free Framer component · by SB design · Text. Screenshots, details, and remix links on Best of Framer."
canonical: "https://framer.elliotli.dev/component/knockout-text-svg"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Knockout Text & SVG

# Knockout Text & SVG

Cut text and icons

[View on Framer](https://framer.com/marketplace/components/knockout-text-svg/?via=elliot-li)

![Knockout Text & SVG preview image 1](https://framer.elliotli.dev/og/component/knockout-text-svg/081a565bb7f02d3b/1600x1010.jpg)

## Summary

Cut text and icons

## Description

Knockout Text & Shapes lets you carve text or any custom SVG icon out of a solid background, gradient, or color — instead of sitting on top, the shape becomes a window straight through it.

**Features:**

→ Add multiple text and/or SVG path layers, each positioned independently

→ Font size, letter spacing, and icon size scale automatically across breakpoints — no manual resizing per screen

→ Tune exactly how aggressively it scales with the Scale Intensity control

→ Adjustable corner radius, background color, and per-shape X/Y positioning with fine offset controls

→ Pure SVG — no images, no external assets, fully editable text at any time

Great for hero sections, editorial headers, agency intros, and portfolio covers where you want bold, oversized typography that still holds up cleanly on mobile.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5015

## Details

- **Author**: SB design
- **Published**: 2026-07-11
- **Updated**: 2026-07-11
- **Added**: 2026-07-11
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing