Background Color Icon SVG
Background Color
Background color SVG Icon Code | Customize color
You can get svg icon background color in blue, white, red color and transparent color from below list. You can also customize color using color picker.
CustomizeBackground color
DownloadSvg Code
<?xml version="1.0" encoding="UTF-8"?><svg width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path fill-rule="evenodd" clip-rule="evenodd" d="M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z" fill="#333"/><path d="M20.8535 5.50439L24.389 9.03993" stroke="#333" stroke-width="1" stroke-linecap="round"/><path d="M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z" stroke="#333" stroke-width="1" stroke-linejoin="round"/><path d="M12 20.0732L28.961 25.6496" stroke="#333" stroke-width="1" stroke-linecap="round"/><path d="M4 43H44" stroke="#333" stroke-width="1" stroke-linecap="round"/></svg> Background color
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: white" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z" fill="white"></path><path d="M20.8535 5.50439L24.389 9.03993" stroke="#333" stroke-width="1" stroke-linecap="round" fill="white"></path><path d="M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z" stroke="#333" stroke-width="1" stroke-linejoin="round" fill="white"></path><path d="M12 20.0732L28.961 25.6496" stroke="#333" stroke-width="1" stroke-linecap="round" fill="white"></path><path d="M4 43H44" stroke="#333" stroke-width="1" stroke-linecap="round" fill="white"></path></svg> Background color
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: red" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z" fill="red"></path><path d="M20.8535 5.50439L24.389 9.03993" stroke="#333" stroke-width="1" stroke-linecap="round" fill="red"></path><path d="M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z" stroke="#333" stroke-width="1" stroke-linejoin="round" fill="red"></path><path d="M12 20.0732L28.961 25.6496" stroke="#333" stroke-width="1" stroke-linecap="round" fill="red"></path><path d="M4 43H44" stroke="#333" stroke-width="1" stroke-linecap="round" fill="red"></path></svg> Background color
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: blue" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z" fill="blue"></path><path d="M20.8535 5.50439L24.389 9.03993" stroke="#333" stroke-width="1" stroke-linecap="round" fill="blue"></path><path d="M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z" stroke="#333" stroke-width="1" stroke-linejoin="round" fill="blue"></path><path d="M12 20.0732L28.961 25.6496" stroke="#333" stroke-width="1" stroke-linecap="round" fill="blue"></path><path d="M4 43H44" stroke="#333" stroke-width="1" stroke-linecap="round" fill="blue"></path></svg> Background color
DownloadSvg Code
<!--?xml version="1.0" encoding="UTF-8"?--><svg style="color: #f3da35" width="45" height="45" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M37 37C39.2091 37 41 35.2091 41 33C41 31.5272 39.6667 29.5272 37 27C34.3333 29.5272 33 31.5272 33 33C33 35.2091 34.7909 37 37 37Z" fill="#f3da35"></path><path d="M20.8535 5.50439L24.389 9.03993" stroke="#333" stroke-width="1" stroke-linecap="round" fill="#f3da35"></path><path d="M23.6818 8.33281L8.12549 23.8892L19.4392 35.2029L34.9955 19.6465L23.6818 8.33281Z" stroke="#333" stroke-width="1" stroke-linejoin="round" fill="#f3da35"></path><path d="M12 20.0732L28.961 25.6496" stroke="#333" stroke-width="1" stroke-linecap="round" fill="#f3da35"></path><path d="M4 43H44" stroke="#333" stroke-width="1" stroke-linecap="round" fill="#f3da35"></path></svg> Advance Editor
You can edit background color as below. Change size color and background color of icon using below tool.
Advertisements
Advertisements