Hover the icon or press Play. Suggested motion: pop. Pick another to preview it and update the animated code:

Flat Color Icons · FcWiFiLogo

Wi Fi Logo icon

A free wi fi logo icon from Flat Color Icons, ready for React. Use it static or animated: both versions are below, copy-paste or one shadcn command away. Sized in em and colored by currentColor.

License: MIT license
Project: github.com

Download SVG

Install with shadcn

npx shadcn@latest add https://ui.cuelark.com/r/icons/flat-color/wi-fi-logo.json

components/icons/flat-color-wi-fi-logo.tsx

import * as React from "react";

/**
 * Wi Fi Logo from Flat Color Icons (https://github.com/icons8/flat-color-icons), MIT.
 * Via Cuelark UI: ui.cuelark.com/icons/flat-color/wi-fi-logo. Sized in em, colored by currentColor.
 */
export function FcWiFiLogoIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      aria-hidden="true"
      version="1.1"
      x="0px"
      y="0px"
      viewBox="0 0 48 48"
      enableBackground="new 0 0 48 48"
      stroke="currentColor"
      fill="currentColor"
      strokeWidth="0"
      width="1em"
      height="1em"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <g>
        <path
          fill="#3F51B5"
          d="M46,26.48c0,4.527-3.268,7.52-7.3,7.52H9.299C5.269,34,2,30.634,2,26.48V21.52C2,17.366,5.269,14,9.299,14
		H38.7c4.032,0,7.3,3.366,7.3,7.52V26.48z"
        />
        <ellipse fill="#3F51B5" cx="24" cy="24" rx="14.902" ry="15" />
      </g>
      <g>
        <polygon
          fill="#FFFFFF"
          points="17,19 14.264,19 13.427,24.859 12.388,19.028 9.93,19.028 8.864,24.859 8.054,19.028 5.266,19.028 
		7.597,29 10.056,29 11.12,22.854 12.209,29 14.693,29 	"
        />
        <rect x="19" y="22" fill="#FFFFFF" width="2.508" height="7" />
        <path
          fill="#FFFFFF"
          d="M21.5,19.747C21.5,20.44,20.94,21,20.25,21S19,20.44,19,19.747c0-0.696,0.56-1.258,1.25-1.258
		S21.5,19.051,21.5,19.747z"
        />
        <path
          fill="#FFFFFF"
          d="M38.561,16c-4.818,0-7.979,0-7.979,0S25,16.193,25,21.914v4.336c0,0,0.101,2.941-3,5.75h16.785
		c0,0,5.215,0,5.215-5.553c0-4.879,0-4.879,0-4.879S43.772,16,38.561,16z M37.339,21.369h-5.651v2.236h5.094v2.344h-5.094V29H29V19
		h8.339V21.369z M40.25,18.489c0.689,0,1.25,0.562,1.25,1.258C41.5,20.44,40.939,21,40.25,21S39,20.44,39,19.747
		C39,19.051,39.561,18.489,40.25,18.489z M41.508,29H39v-7h2.508V29z"
        />
      </g>
    </svg>
  );
}

With react-icons

import { FcWiFiLogo } from "react-icons/fc";

export function Example() {
  return <FcWiFiLogo className="size-5" />;
}

wi-fi-logo.svg

<svg
  version="1.1"
  x="0px"
  y="0px"
  viewBox="0 0 48 48"
  enable-background="new 0 0 48 48"
  stroke="currentColor"
  fill="currentColor"
  stroke-width="0"
  width="1em"
  height="1em"
  xmlns="http://www.w3.org/2000/svg"
>
  <g>
    <path
      fill="#3F51B5"
      d="M46,26.48c0,4.527-3.268,7.52-7.3,7.52H9.299C5.269,34,2,30.634,2,26.48V21.52C2,17.366,5.269,14,9.299,14
		H38.7c4.032,0,7.3,3.366,7.3,7.52V26.48z"
    />
    <ellipse fill="#3F51B5" cx="24" cy="24" rx="14.902" ry="15" />
  </g>
  <g>
    <polygon
      fill="#FFFFFF"
      points="17,19 14.264,19 13.427,24.859 12.388,19.028 9.93,19.028 8.864,24.859 8.054,19.028 5.266,19.028 
		7.597,29 10.056,29 11.12,22.854 12.209,29 14.693,29 	"
    />
    <rect x="19" y="22" fill="#FFFFFF" width="2.508" height="7" />
    <path
      fill="#FFFFFF"
      d="M21.5,19.747C21.5,20.44,20.94,21,20.25,21S19,20.44,19,19.747c0-0.696,0.56-1.258,1.25-1.258
		S21.5,19.051,21.5,19.747z"
    />
    <path
      fill="#FFFFFF"
      d="M38.561,16c-4.818,0-7.979,0-7.979,0S25,16.193,25,21.914v4.336c0,0,0.101,2.941-3,5.75h16.785
		c0,0,5.215,0,5.215-5.553c0-4.879,0-4.879,0-4.879S43.772,16,38.561,16z M37.339,21.369h-5.651v2.236h5.094v2.344h-5.094V29H29V19
		h8.339V21.369z M40.25,18.489c0.689,0,1.25,0.562,1.25,1.258C41.5,20.44,40.939,21,40.25,21S39,20.44,39,19.747
		C39,19.051,39.561,18.489,40.25,18.489z M41.508,29H39v-7h2.508V29z"
    />
  </g>
</svg>

Attribution

"Wi Fi Logo" icon from Flat Color Icons (https://github.com/icons8/flat-color-icons), licensed under MIT license.

Related icons:

Similar Flat Color Icons icons