switch filled icon

switch-filled from Element Plus by Element Plus · Outline · MIT Free for personal and commercial use.

Name
switch-filled
Set
Element Plus
Style
Outline
Viewbox
1024×1024
License
MIT

The same icon in other sets

switch-filledMaterial Line Icons

Related icons in Element Plus

switch-button

Use the switch filled icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M247.5 358.4a72.7 72.7 0 0 0 72.3 72.4c39.9 0 72.4-32.6 72.4-72.4S359.6 286 319.8 286s-72.3 32.6-72.3 72.4"/><path fill="currentColor" d="M492.4 128H324.7a197 197 0 0 0-139 57.6a197 197 0 0 0-57.7 139v374.1a197 197 0 0 0 121.4 181.8a197 197 0 0 0 75.3 15h167.7c3 0 5.4-2.5 5.4-5.5V133.4c.6-3-1.8-5.4-5.4-5.4m-56.1 705.9H324.7a132 132 0 0 1-95.4-39.9a134 134 0 0 1-39.8-95.3v-374c-.1-17.8 3.4-35.4 10.2-51.7a132 132 0 0 1 29.6-43.7a135 135 0 0 1 95.4-39.8h111.6zm402-647.7a197 197 0 0 0-139-57.6H580.5c-3 0-4.8 2.4-4.8 4.8v757.2c-.6 3 1.7 5.4 5.4 5.4h118.2a197 197 0 0 0 139-57.6a197 197 0 0 0 57.7-139V325.2a197 197 0 0 0-57.6-139M727 628c-42.8 0-77.8-35-77.8-77.8s35-77.8 77.8-77.8s77.8 35 77.8 77.8s-35 77.8-77.8 77.8"/></svg>

React

import type { SVGProps } from "react";

export function EpSwitchFilled(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M247.5 358.4a72.7 72.7 0 0 0 72.3 72.4c39.9 0 72.4-32.6 72.4-72.4S359.6 286 319.8 286s-72.3 32.6-72.3 72.4"/><path fill="currentColor" d="M492.4 128H324.7a197 197 0 0 0-139 57.6a197 197 0 0 0-57.7 139v374.1a197 197 0 0 0 121.4 181.8a197 197 0 0 0 75.3 15h167.7c3 0 5.4-2.5 5.4-5.5V133.4c.6-3-1.8-5.4-5.4-5.4m-56.1 705.9H324.7a132 132 0 0 1-95.4-39.9a134 134 0 0 1-39.8-95.3v-374c-.1-17.8 3.4-35.4 10.2-51.7a132 132 0 0 1 29.6-43.7a135 135 0 0 1 95.4-39.8h111.6zm402-647.7a197 197 0 0 0-139-57.6H580.5c-3 0-4.8 2.4-4.8 4.8v757.2c-.6 3 1.7 5.4 5.4 5.4h118.2a197 197 0 0 0 139-57.6a197 197 0 0 0 57.7-139V325.2a197 197 0 0 0-57.6-139M727 628c-42.8 0-77.8-35-77.8-77.8s35-77.8 77.8-77.8s77.8 35 77.8 77.8s-35 77.8-77.8 77.8"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1024 1024"><path fill="currentColor" d="M247.5 358.4a72.7 72.7 0 0 0 72.3 72.4c39.9 0 72.4-32.6 72.4-72.4S359.6 286 319.8 286s-72.3 32.6-72.3 72.4"/><path fill="currentColor" d="M492.4 128H324.7a197 197 0 0 0-139 57.6a197 197 0 0 0-57.7 139v374.1a197 197 0 0 0 121.4 181.8a197 197 0 0 0 75.3 15h167.7c3 0 5.4-2.5 5.4-5.5V133.4c.6-3-1.8-5.4-5.4-5.4m-56.1 705.9H324.7a132 132 0 0 1-95.4-39.9a134 134 0 0 1-39.8-95.3v-374c-.1-17.8 3.4-35.4 10.2-51.7a132 132 0 0 1 29.6-43.7a135 135 0 0 1 95.4-39.8h111.6zm402-647.7a197 197 0 0 0-139-57.6H580.5c-3 0-4.8 2.4-4.8 4.8v757.2c-.6 3 1.7 5.4 5.4 5.4h118.2a197 197 0 0 0 139-57.6a197 197 0 0 0 57.7-139V325.2a197 197 0 0 0-57.6-139M727 628c-42.8 0-77.8-35-77.8-77.8s35-77.8 77.8-77.8s77.8 35 77.8 77.8s-35 77.8-77.8 77.8"/></svg>
</template>

CSS

.icon-switch-filled {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M247.5%20358.4a72.7%2072.7%200%200%200%2072.3%2072.4c39.9%200%2072.4-32.6%2072.4-72.4S359.6%20286%20319.8%20286s-72.3%2032.6-72.3%2072.4%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M492.4%20128H324.7a197%20197%200%200%200-139%2057.6a197%20197%200%200%200-57.7%20139v374.1a197%20197%200%200%200%20121.4%20181.8a197%20197%200%200%200%2075.3%2015h167.7c3%200%205.4-2.5%205.4-5.5V133.4c.6-3-1.8-5.4-5.4-5.4m-56.1%20705.9H324.7a132%20132%200%200%201-95.4-39.9a134%20134%200%200%201-39.8-95.3v-374c-.1-17.8%203.4-35.4%2010.2-51.7a132%20132%200%200%201%2029.6-43.7a135%20135%200%200%201%2095.4-39.8h111.6zm402-647.7a197%20197%200%200%200-139-57.6H580.5c-3%200-4.8%202.4-4.8%204.8v757.2c-.6%203%201.7%205.4%205.4%205.4h118.2a197%20197%200%200%200%20139-57.6a197%20197%200%200%200%2057.7-139V325.2a197%20197%200%200%200-57.6-139M727%20628c-42.8%200-77.8-35-77.8-77.8s35-77.8%2077.8-77.8s77.8%2035%2077.8%2077.8s-35%2077.8-77.8%2077.8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%201024%201024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M247.5%20358.4a72.7%2072.7%200%200%200%2072.3%2072.4c39.9%200%2072.4-32.6%2072.4-72.4S359.6%20286%20319.8%20286s-72.3%2032.6-72.3%2072.4%22%2F%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M492.4%20128H324.7a197%20197%200%200%200-139%2057.6a197%20197%200%200%200-57.7%20139v374.1a197%20197%200%200%200%20121.4%20181.8a197%20197%200%200%200%2075.3%2015h167.7c3%200%205.4-2.5%205.4-5.5V133.4c.6-3-1.8-5.4-5.4-5.4m-56.1%20705.9H324.7a132%20132%200%200%201-95.4-39.9a134%20134%200%200%201-39.8-95.3v-374c-.1-17.8%203.4-35.4%2010.2-51.7a132%20132%200%200%201%2029.6-43.7a135%20135%200%200%201%2095.4-39.8h111.6zm402-647.7a197%20197%200%200%200-139-57.6H580.5c-3%200-4.8%202.4-4.8%204.8v757.2c-.6%203%201.7%205.4%205.4%205.4h118.2a197%20197%200%200%200%20139-57.6a197%20197%200%200%200%2057.7-139V325.2a197%20197%200%200%200-57.6-139M727%20628c-42.8%200-77.8-35-77.8-77.8s35-77.8%2077.8-77.8s77.8%2035%2077.8%2077.8s-35%2077.8-77.8%2077.8%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/ep/switch-filled.svg?color=%231a73e8&size=48