---
title: "neon sign — Free Framer component · Best of Framer"
description: "Free Framer component · by Mikiko Niwa · Text. neon sign — a ready-made focal point, set up entirely from the property panel."
canonical: "https://framer.elliotli.dev/component/neon-sign"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/neon sign

# neon sign

Instant neon atmosphere

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

![neon sign preview image 1](https://framer.elliotli.dev/og/component/neon-sign/8f3345aa33b9f1a5/1600x1200.jpg)

## Summary

neon sign — a ready-made focal point, set up entirely from the property panel.

## Description

**NeonSign — Instant neon atmosphere**

Turn any text or SVG into a glowing, flickering neon sign — a ready-made focal point, set up entirely from the property panel. No code.

## Content

-   **Content** — Text or SVG.
    

## Text

-   **Text** — your words (Enter = line break).
    
-   **Font** — four neon fonts (Pacifico, Monoton, Bungee Inline, Audiowide) or any Framer font via Custom font.
    
-   **Size / Spacing** — font size and letter spacing.
    

## SVG

-   **Source** — Paste code or Upload file (.svg).
    
-   **Render** — Fill or Stroke (with Stroke Width).
    
-   **Force White Core** — recolor an uploaded SVG to a white silhouette before the neon glow (see note).
    
-   **Size** — SVG height.
    

## Neon Style

-   **Neon Color / Core Color / Glow** — outer color, bright inner core, and glow intensity.
    

## Flicker & Power

-   **Power** — on / off (unlit).
    
-   **Flicker + Style** — Subtle, Buzz, or Broken.
    

## Frame

-   **Mode** — None, Match Text, or Custom.
    
-   **Color / Width / Radius** — frame look.
    
-   **Gap** — frame-to-content spacing, all sides or per side.
    
-   **Flicker + Style** — flickers independently of the text.
    

## Layout

-   **Background** — defaults to black so the neon pops; set transparent to use over a photo.
    
-   **Padding / Align** — spacing and Left / Center / Right.
    

## Working with SVG and color

With **Upload file**, keep **Force White Core** on: it turns any SVG into a white silhouette, then lights it in your neon color for a clean, even glow. Off, the SVG keeps its colors and just gains the surrounding glow (fine if it's already white or a light line drawing). For per-part coloring or precise line art, use **Paste code** — you can recolor shapes and set stroke width.

Note: dragging an SVG onto the canvas only shows a plain image, with no glow — drop it into the component's upload field instead. Flicker, glow, frame, and power work with either method.

## Responsive

Adjust **Size** on tablet/phone breakpoints so the sign fits.

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

-   All · #6552

## Details

- **Author**: Mikiko Niwa
- **Published**: 2026-06-19
- **Updated**: 2026-06-19
- **Added**: 2026-06-19
- **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