---
title: "Language Icon Toggle — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Mikiko Niwa · Buttons. SEO-ready toggle for multi-language site"
canonical: "https://framer.elliotli.dev/component/language-icon-toggle"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Language Icon Toggle

# Language Icon Toggle

SEO-ready toggle for multi-language site

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

![Language Icon Toggle preview image 1](https://framer.elliotli.dev/og/component/language-icon-toggle/6838bd06c08b0272/1600x1200.jpg)

## Summary

SEO-ready toggle for multi-language site

## Description

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-rrkgz5vr-IvslE8MWnsCMkPucXV2Pp5dBm0VzXY)

## About this Component

A compact language switcher that reveals a text-based selector when you click or hover the globe icon.

Each language links to its own page — no auto-translation, full control, and SEO-friendly by design.

### Key Features

-   Globe icon expands a text-based language selector on click or hover
    
-   Supports up to 5 languages (A & B always visible; C–E optional)
    
-   Choose between click or hover trigger
    
-   "Close on select" option available
    
-   Smooth expand/collapse and indicator slide animation
    
-   Link each language to its own page URL
    
-   Keyboard and screen reader accessible
    
-   Event callback for connecting with other components
    

### Customization

-   Light mode / Dark mode colors configurable separately (auto-switches with data-framer-theme)
    
-   Globe size, gap, border width, and font adjustable from the property panel
    
-   30 language presets + custom language code input
    

### SEO-Friendly Multilingual Structure

This component does not dynamically switch text within a single page. Instead, each language is managed as a separate page, which makes it well-suited for:

-   Country- and language-specific SEO
    
-   Proper search engine indexing
    
-   Clear and scalable multilingual site structures
    

This approach is especially effective for SEO-conscious multilingual websites.

### Important Note

This component does **not** include any translation functionality.

It is designed purely as a **toggle UI for switching between language-specific pages**, not for translating content automatically.

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

-   All · #3225

## Details

- **Author**: Mikiko Niwa
- **Price**: $14.00
- **Published**: 2026-04-27
- **Updated**: 2026-04-27
- **Added**: 2026-04-09
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything