Checkbox with SVG icon

Developer
Massimo Cassandro
Size
4,376 Kb
Views
20,240
  1. Checkbox with SVG icon Previews
  2. Checkbox with SVG icon HTML Codes
  3. Checkbox with SVG icon CSS Codes

How do I make an checkbox with svg icon?

Pure css & svg checkbox buttons. What is a checkbox with svg icon? How do you make a checkbox with svg icon? This script and codes were developed by Massimo Cassandro on 09 November 2022, Wednesday.

Checkbox with SVG icon Previews
IQ Test

Checkbox with SVG icon - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>checkbox with SVG icon</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg style="display:none">	<symbol id="newsletter" viewBox="296 148 128 128">	<g>	<path d="M305,166.8l50.4,50.9c1.2,1.2,2.8,1.9,4.5,1.9c1.7,0,3.3-0.7,4.5-1.9l50.4-50.9H305z"/>	<path d="M379.3,212.1l-10,10.2c-2.5,2.5-5.8,3.8-9,3.8c-3.3,0-6.6-1.3-9-3.8L341,211.9l-42.2,42.5l-0.9,0.8	c1.2,1.2,2.9,2,4.6,2h115.2c1.7,0,3.4-0.8,4.6-2l-0.9-0.8L379.3,212.1z"/>	<path d="M298.9,169.5l-0.8-1c-1.3,1.2-2.1,2.9-2.1,4.7v74.8l40.4-40.7L298.9,169.5z"/>	<path d="M421.5,169.5l-37.7,38l40.2,40.5v-74.8c0-1.7-0.7-3.3-1.8-4.5L421.5,169.5z"/>	</g>	</symbol>	<symbol id="catalogo" viewBox="296 0 128 128">	<g>	<path d="M361.6,103.6c-9.2-9.4-16.8-14.9-49.9-14.9V17.9c33.1,0,40.7,5.4,49.9,14.8V103.6z"/>	<path d="M301.6,110.1c-0.5,0-2-0.1-2.4-0.3c-1.3-0.5-3.2-1.8-3.2-3.1V38.4l8.5-6.8v68.9c12.8-5.8,35.8-6.2,51.1,6.2	c-16-12.8-46.7-2.8-51.8,2.4C303.2,109.7,302.4,110.1,301.6,110.1z"/>	<path d="M363.7,103.6c9.1-9.4,16.8-14.9,49.8-14.9V17.9c-33.1,0-40.7,5.4-49.8,14.8V103.6z"/>	<path d="M423.7,110.1c0.5,0-0.8-0.1-0.4-0.3c1.3-0.5,0.4-1.8,0.4-3.1V38.4l-4.3-6.8v68.9c-8.6-5.8-35.1-6.2-50.5,6.2	c16-12.8,47-2.8,52.2,2.4C421.7,109.7,422.8,110.1,423.7,110.1z"/>	</g>	</symbol>	<symbol id="volantone" viewBox="0 0 128 128">	<path d="M39.6,5.1v10L0,25.5L25,120l14.6-3.8v6.6h48.3L128,84.3V5.1H39.6z M33.2,106L14.1,33.7l25.4-6.6v77.2L33.2,106	z M115.4,76.5H81.6v33.7H48V17.7h67.4V76.5z"/>	</symbol> <!-- embedded in css <symbol id="check-sign" viewBox="0 0 32 32"> <path d="M9.95 26.2c-0.1 0-0.15 0-0.25 0-0.45-0.050-0.9-0.35-1.1-0.8l-5.45-10.55c-0.4-0.75-0.1-1.65 0.65-2 0.75-0.4 1.65-0.1 2 0.65l4.5 8.75 16.1-15.95c0.6-0.6 1.55-0.6 2.1 0 0.6 0.6 0.6 1.55 0 2.1l-17.5 17.35c-0.25 0.3-0.65 0.45-1.050 0.45z" fill="#000000"></path> </symbol>
-->
</svg>
<div class="no-touch"> <!-- touch / no-touch are added by Modernizr --> <h1>Checkbox with SVG</h1> <div class="icn_wrapper"> <input type="checkbox" name="xxx" value="volantone" id="filtro-volantone"> <label for="filtro-volantone"> <div class="icone_offerte"> <svg> <use xlink:href="#volantone" /> </svg> </div> <span class="icn_label_text">Volantone</span> </label> </div> <div class="icn_wrapper"> <input type="checkbox" name="xxx" value="catalogo" id="filtro-catalogo"> <label for="filtro-catalogo"> <div class="icone_offerte"> <svg> <use xlink:href="#catalogo" /> </svg> </div> <span class="icn_label_text">Catalogo</span> </label> </div> <div class="icn_wrapper"> <input type="checkbox" name="xxx" value="newsletter" id="filtro-newsletter"> <label for="filtro-newsletter"> <div class="icone_offerte"> <svg> <use xlink:href="#newsletter" /> </svg> </div> <span class="icn_label_text">Newsletter</span> </label> </div>
</div>
</body>
</html>

Checkbox with SVG icon - Script Codes CSS Codes

.icone_offerte { width: 2.5em; height: 2.5em; background-color: #666; border-radius: 50%; display: inline-block; overflow: hidden; position: relative; margin: 0;
}
.icone_offerte svg { fill: #fff; display: inline-block; width: 1.65em; height: 1.65em; margin: 0; position: absolute; top: 0.425em; left: 0.425em;
}
@-webkit-keyframes check_in { from { left: 0; } to { left: -1.65em; }
}
@keyframes check_in { from { left: 0; } to { left: -1.65em; }
}
.icn_wrapper { display: inline-block;
}
.icn_wrapper input { display: none;
}
.icn_wrapper input:not(:checked) + label:before { content: none;
}
.icn_wrapper input:checked + label:before { content: url('data:image/svg+xml;utf8,'); width: 1.65em; height: 1.65em; position: absolute; top: 50%; left: -1.65em; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-animation: check_in 0.2s ease-in; animation: check_in 0.2s ease-in;
}
.icn_wrapper input:checked + label .icone_offerte { background-color: #008040;
}
.icn_wrapper input:checked + label .icn_label_text { color: #008040;
}
.icn_wrapper label { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 3.75em; cursor: pointer; position: relative;
}
.icn_wrapper label .icn_label_text { margin-left: .3em; font-style: italic; font-size: 1em; font-weight: normal; color: #666; font-family: Helvetica, Arial, sans-serif;
}
.icn_wrapper label .icone_offerte { background-color: #ccc;
}
.touch .icn_wrapper label .icone_offerte { width: 3em; height: 3em; margin: .5em 0;
}
.no-touch .icn_wrapper label:hover .icone_offerte { background-color: #c00 !important;
}
.no-touch .icn_wrapper label:hover .icn_label_text { color: #c00 !important;
}
Checkbox with SVG icon - Script Codes
Checkbox with SVG icon - Script Codes
Home Page Home
Developer Massimo Cassandro
Username massimo-cassandro
Uploaded November 09, 2022
Rating 3
Size 4,376 Kb
Views 20,240
Do you need developer help for Checkbox with SVG icon?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Massimo Cassandro (massimo-cassandro) Script Codes
Name
Google maps circle method
JQuery UI Datepicker
SVG embedding methods
PDF Flyer generator
JQuery UI Autocomplete for Bootstrap
Colspan auto
SVG symbols demo
CSS sprites example
Nested table email layout
Grumpicon demo
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!