Swap Box Line Icon SVG
Swap Box Line
Swap box line SVG Icon Code | Customize color
You can get svg icon swap box line in blue, white, red color and transparent color from below list. You can also customize color using color picker.
Svg Code
<svg style="color: white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <g> <path fill="white" d="M0 0h24v24H0z"></path> <path d="M4 5v14h16V5H4zM3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm12 4l3.5 3-3.5 3v-2h-4V9h4V7zM9 17l-3.5-3L9 11v2h4v2H9v2z" fill="white"></path> </g> </svg>
Svg Code
<svg style="color: red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <g> <path fill="red" d="M0 0h24v24H0z"></path> <path d="M4 5v14h16V5H4zM3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm12 4l3.5 3-3.5 3v-2h-4V9h4V7zM9 17l-3.5-3L9 11v2h4v2H9v2z" fill="red"></path> </g> </svg>
Svg Code
<svg style="color: blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <g> <path fill="blue" d="M0 0h24v24H0z"></path> <path d="M4 5v14h16V5H4zM3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm12 4l3.5 3-3.5 3v-2h-4V9h4V7zM9 17l-3.5-3L9 11v2h4v2H9v2z" fill="blue"></path> </g> </svg>
Svg Code
<svg style="color: #f3da35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <g> <path fill="#f3da35" d="M0 0h24v24H0z"></path> <path d="M4 5v14h16V5H4zM3 3h18a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zm12 4l3.5 3-3.5 3v-2h-4V9h4V7zM9 17l-3.5-3L9 11v2h4v2H9v2z" fill="#f3da35"></path> </g> </svg>
Advance Editor
You can edit swap box line as below. Change size color and background color of icon using below tool.
Advertisements
Advertisements