Step 7: styling an icon group

Size
4,565 Kb
Views
2,024

How do I make an step 7: styling an icon group?

Group styling of SVG with CSS. What is a step 7: styling an icon group? How do you make a step 7: styling an icon group? This script and codes were developed by Benedikte Vanderweeën on 21 January 2023, Saturday.

Step 7: styling an icon group Previews

Step 7: styling an icon group - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Step 7: styling an icon group</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- ico 01 -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M27,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.8c-1.4,0-2.5-1.1-2.5-2.5V4.9	c0-1.4,1.1-2.5,2.5-2.5H27 M27,0H4.8C2.1,0-0.1,2.2-0.1,4.9v22.2c0,2.7,2.2,4.9,4.9,4.9H27c2.7,0,4.9-2.2,4.9-4.9V4.9	C31.9,2.2,29.7,0,27,0L27,0z"/>	<path class="red" d="M17.6,23.2c0,0.5-0.4,0.9-0.9,0.9h-1.4c-0.5,0-0.9-0.4-0.9-0.9l0,0c0-0.5,0.4-0.9,0.9-0.9h1.4	C17.2,22.3,17.6,22.7,17.6,23.2L17.6,23.2z"/>	<g>	<g>	<circle class="blue" cx="10.8" cy="13.4" r="1.1"/>	</g>	<g>	<circle class="blue" cx="21.2" cy="13.4" r="1.1"/>	</g>	<path class="yellow" d="M21.2,8.8c-2.3,0-4.3,1.8-4.6,4h-1.1c-0.1,0-0.1,0-0.1,0c-0.3-2.3-2.2-4-4.6-4c-2.5,0-4.6,2.1-4.6,4.6	c0,2.5,2.1,4.6,4.6,4.6c2.3,0,4.3-1.8,4.6-4c0,0,0.1,0,0.1,0h1.1c0.3,2.3,2.2,4,4.6,4c2.5,0,4.6-2.1,4.6-4.6	C25.8,10.9,23.7,8.8,21.2,8.8z M10.9,16.8c-1.9,0-3.4-1.5-3.4-3.4S9,10,10.9,10c1.9,0,3.4,1.5,3.4,3.4S12.7,16.8,10.9,16.8z M21.2,16.8c-1.9,0-3.4-1.5-3.4-3.4s1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4S23.1,16.8,21.2,16.8z"/>	</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M27.7,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H5.5c-1.4,0-2.5-1.1-2.5-2.5V4.9c0-1.4,1.1-2.5,2.5-2.5H27.7 M27.7,0H5.5C2.8,0,0.6,2.2,0.6,4.9v22.2c0,2.7,2.2,4.9,4.9,4.9h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9C32.6,2.2,30.4,0,27.7,0L27.7,0z"/>	<g>	<g class="yellow">	<path d="M16.3,24.1c-2.9,0-5.3-2.2-5.3-5c0-0.4,0.4-0.8,0.8-0.8c0.4,0,8.6,0,9,0c0.4,0,0.8,0.4,0.8,0.8	C21.6,21.8,19.2,24.1,16.3,24.1z"/>	</g>	<g class="red">	<path d="M13.6,9c-0.7-0.7-1.8-0.7-2.5,0L11,9l0,0c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5L11,14l2.5-2.5l0,0l0.1-0.1	C14.3,10.8,14.3,9.7,13.6,9z"/>	<path d="M24.1,9c-0.7-0.7-1.8-0.7-2.5,0L21.5,9l0,0c-0.7-0.7-1.8-0.7-2.5,0c-0.7,0.7-0.7,1.8,0,2.5l2.5,2.5l2.5-2.5l0,0l0.1-0.1	C24.7,10.8,24.7,9.7,24.1,9z"/>	</g>	</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<g>	<path class="red" d="M16,24.5c-2.9,0-5.3-2.2-5.3-5c0-0.4,0.4-0.8,0.8-0.8c0.4,0,8.6,0,9,0c0.4,0,0.8,0.4,0.8,0.8	C21.3,22.3,18.9,24.5,16,24.5z"/>	</g>	<path class="purple" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9	c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9	C32,2.2,29.8,0,27.1,0L27.1,0z"/>	<g>	<polygon class="yellow" points="11,7.7 12,9.9 14.5,10.3 12.7,12 13.1,14.4 11,13.3 8.8,14.4 9.2,12 7.4,10.3 9.9,9.9	"/>	<polygon class="yellow" points="21,7.7 22.1,9.9 24.6,10.3 22.8,12 23.2,14.4 21,13.3 18.9,14.4 19.3,12 17.5,10.3 20,9.9	"/>	</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M26.9,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.8c-1.4,0-2.5-1.1-2.5-2.5V4.9	c0-1.4,1.1-2.5,2.5-2.5H26.9 M26.9,0H4.8C2.1,0-0.1,2.2-0.1,4.9v22.2c0,2.7,2.2,4.9,4.9,4.9h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9	C31.9,2.2,29.6,0,26.9,0L26.9,0z"/>	<g>	<path class="red" d="M8.2,22.4c-0.4-0.6-0.1-1.4,0.7-1.8c4.3-2.1,9.3-2.1,13.5,0c0.8,0.4,1.1,1.2,0.7,1.8l0,0	c-0.4,0.6-1.1,0.7-1.8,0.4c-3.6-1.8-7.8-1.8-11.4,0C9.3,23.1,8.5,23,8.2,22.4L8.2,22.4z"/>	<path class="white" d="M23.7,17c-0.1,1-0.8,1.7-1.5,1.5c-0.7-0.2-1.1-0.9-1.1-1.6c0.1-0.7,1.1-2.5,1.1-2.5	C22.2,14.2,23.8,15.9,23.7,17z"/>	<g>	<circle class="blue" cx="11" cy="12.1" r="2.1"/>	<circle class="blue" cx="19.9" cy="12.1" r="2.1"/>	</g>	</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9	c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9	C32,2.2,29.8,0,27.1,0L27.1,0z"/>	<g>	<circle class="blue" cx="11.5" cy="11.9" r="2.1"/>	<circle class="blue" cx="20.4" cy="11.9" r="2.1"/>	</g>	<path class="red" d="M21.4,17.8c0-0.5-0.4-0.8-0.8-0.8c-0.5,0-0.8,0.4-0.8,0.8c0,1.9-1.7,3.5-3.8,3.5s-3.8-1.6-3.8-3.5	c0-0.5-0.4-0.8-0.8-0.8c-0.5,0-0.8,0.4-0.8,0.8c0,2.2,1.5,4.1,3.6,4.8v2.1c0,1,0.8,1.9,1.9,1.9s1.9-0.8,1.9-1.9v-2.1	C19.9,21.9,21.4,20,21.4,17.8z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9	c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9	C32,2.2,29.8,0,27.1,0L27.1,0z"/>	<path class="yellow" d="M21.6,9.2c-2.1,0-3.9,0.3-4.8,1.4h-2.3c-0.9-1.1-2.7-1.4-4.8-1.4c-2.9,0-5.3,0.7-5.3,3.1	c0,2.4,2.4,4.4,5.3,4.4c2.7,0,4.9-1.7,5.3-3.8h1.4c0.4,2.2,2.6,3.8,5.3,3.8c2.9,0,5.3-2,5.3-4.4C26.9,9.9,24.6,9.2,21.6,9.2z"/>	<path class="red" d="M20.7,21.7c0-0.6-0.5-1.1-1.1-1.1H13c-0.6,0-1.1,0.5-1.1,1.1c0,0.6,0.5,1.1,1.1,1.1h2.1	c0.2,0.9,1.4,1.5,2.8,1.5C19.5,24.3,20.7,22.8,20.7,21.7C20.7,21.8,20.7,21.8,20.7,21.7C20.7,21.7,20.7,21.7,20.7,21.7z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M27.1,2.8c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V5.3	c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0.4H4.9C2.2,0.4,0,2.6,0,5.3v22.2c0,2.7,2.2,4.9,4.9,4.9h22.2c2.7,0,4.9-2.2,4.9-4.9V5.3	C32,2.6,29.8,0.4,27.1,0.4L27.1,0.4z"/>	<path class="red" d="M15.9,23.6c0,0.6-0.5,1.1-1.1,1.1h-1.6c-0.6,0-1.1-0.5-1.1-1.1l0,0c0-0.6,0.5-1.1,1.1-1.1h1.6	C15.4,22.5,15.9,23,15.9,23.6L15.9,23.6z"/>	<path class="blue" d="M11.2,11.1c-2.1,0-3.8,1.7-3.8,3.8c0,2.1,1.7,3.8,3.8,3.8c2.1,0,3.8-1.7,3.8-3.8C15,12.8,13.3,11.1,11.2,11.1z M11.8,15.3c-0.9,0-1.5-0.7-1.5-1.5c0-0.9,0.7-1.5,1.5-1.5c0.9,0,1.5,0.7,1.5,1.5C13.3,14.6,12.6,15.3,11.8,15.3z"/>	<path class="blue" d="M20.2,10.3c-2.4,0-4.4,2-4.4,4.4s2,4.4,4.4,4.4s4.4-2,4.4-4.4S22.6,10.3,20.2,10.3z M18.9,17.3	c-0.9,0-1.5-0.7-1.5-1.5c0-0.9,0.7-1.5,1.5-1.5c0.9,0,1.5,0.7,1.5,1.5C20.5,16.6,19.8,17.3,18.9,17.3z"/>	<path class="yellow" d="M12.8,8.3c0.1,0.5-0.2,0.9-0.6,1c-1.3,0.3-2.6,0.8-3.8,1.5c-0.4,0.2-0.8,0.1-1.1-0.3l0,0	C7.1,10,7.2,9.4,7.6,9.2c1.3-0.8,2.7-1.3,4.2-1.6C12.2,7.5,12.7,7.8,12.8,8.3L12.8,8.3z"/>	<path class="yellow" d="M23.7,9.5c-0.3,0.4-0.8,0.4-1.1,0.2c-1.1-0.8-2.3-1.5-3.6-1.9c-0.4-0.1-0.6-0.6-0.4-1l0,0	c0.1-0.4,0.6-0.7,1.1-0.5c1.4,0.5,2.8,1.2,4,2.1C24,8.6,24,9.1,23.7,9.5L23.7,9.5z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M27.2,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H5.1c-1.4,0-2.5-1.1-2.5-2.5V4.9c0-1.4,1.1-2.5,2.5-2.5H27.2 M27.2,0H5.1C2.4,0,0.2,2.2,0.2,4.9v22.2c0,2.7,2.2,4.9,4.9,4.9h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9C32.2,2.2,29.9,0,27.2,0L27.2,0z"/>	<path class="blue" d="M23.4,11.2c-0.2-0.4-0.5-0.6-0.9-0.6h-3.6c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1h1c0,0,0,0,0,0c0,1.1,0.9,2.1,2.1,2.1	c1.1,0,2.1-0.9,2.1-2.1C24,12.1,23.8,11.5,23.4,11.2z"/>	<path class="blue" d="M12.9,11.2c-0.2-0.4-0.5-0.6-0.9-0.6H8.4c-0.6,0-1,0.5-1,1c0,0.6,0.5,1,1,1h1c0,0,0,0,0,0c0,1.1,0.9,2.1,2.1,2.1	c1.1,0,2.1-0.9,2.1-2.1C13.5,12.1,13.3,11.5,12.9,11.2z"/>	<path class="red" d="M14.4,22c0,0.6-0.5,1.1-1.1,1.1h-2.2c-0.6,0-1.1-0.5-1.1-1.1l0,0c0-0.6,0.5-1.1,1.1-1.1h2.2C13.9,20.8,14.4,21.3,14.4,22	L14.4,22z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9	c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9	C32,2.2,29.8,0,27.1,0L27.1,0z"/>	<circle class="blue" cx="11.2" cy="13.3" r="2.1"/>	<path class="red" d="M23.3,19.4c0.4,0.5,0.2,1.4-0.5,1.8c-4,2.5-9,3-13.5,1.4c-0.8-0.3-1.2-1.1-0.9-1.7l0,0c0.3-0.6,1-0.8,1.7-0.6	c3.8,1.4,8,0.9,11.4-1.2C22.1,18.8,22.9,18.8,23.3,19.4L23.3,19.4z"/>	<path class="white" d="M13.2,9.5c-0.2,0.3-0.6,0.4-0.9,0.2c-1.1-0.6-2.3-0.3-3.2,0.7c-0.3,0.3-0.6,0.4-0.9,0.2l0,0	C7.9,10.3,8,9.7,8.3,9.2c1.2-1.4,3-1.8,4.5-0.9C13.3,8.6,13.4,9.2,13.2,9.5L13.2,9.5z"/>	<path class="white" d="M20.3,18.3c0.2,0.3,0.6,0.4,0.9,0.2c1.1-0.6,2.3-0.3,3.2,0.7c0.3,0.3,0.6,0.4,0.9,0.2l0,0	c0.3-0.2,0.2-0.9-0.1-1.3c-1.2-1.4-3-1.8-4.5-0.9C20.3,17.3,20.1,17.9,20.3,18.3L20.3,18.3z"/>	<path class="blue" d="M23.8,12.1c0.1,0.5-0.2,1-0.6,1.1l-4.7,1.3c-0.5,0.1-1-0.2-1.1-0.6l0,0c-0.1-0.5,0.2-1,0.6-1.1l4.7-1.3	C23.1,11.3,23.6,11.6,23.8,12.1L23.8,12.1z"/>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9	c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9	C32,2.2,29.8,0,27.1,0L27.1,0z"/>	<g>	<path class="yellow" d="M23.1,20.8c0,3.5-3.2,6.3-7.1,6.3c-3.9,0-7.1-2.8-7.1-6.3s3.2,0,7.1,0C19.9,20.8,23.1,17.3,23.1,20.8z"/>	<g>	<g>	<circle class="blue" cx="10.8" cy="13.3" r="1.1"/>	</g>	<g>	<circle class="blue" cx="21.2" cy="13.3" r="1.1"/>	</g>	<path class="red" d="M21.2,8.7c-2.3,0-4.3,1.8-4.6,4h-1.1c-0.1,0-0.1,0-0.1,0c-0.3-2.3-2.2-4-4.6-4c-2.5,0-4.6,2.1-4.6,4.6	c0,2.5,2.1,4.6,4.6,4.6c2.3,0,4.3-1.8,4.6-4c0,0,0.1,0,0.1,0h1.1c0.3,2.3,2.2,4,4.6,4c2.5,0,4.6-2.1,4.6-4.6	C25.8,10.8,23.7,8.7,21.2,8.7z M10.8,16.7c-1.9,0-3.4-1.5-3.4-3.4S9,9.9,10.8,9.9c1.9,0,3.4,1.5,3.4,3.4S12.7,16.7,10.8,16.7z M21.2,16.7c-1.9,0-3.4-1.5-3.4-3.4s1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4S23,16.7,21.2,16.7z"/>	</g>	<path class="white" d="M13.6,6.8c-0.2,0.3-0.6,0.4-0.9,0.2c-1.1-0.6-2.3-0.3-3.2,0.7C9.2,7.9,8.8,8,8.6,7.8l0,0	C8.3,7.6,8.3,6.9,8.7,6.5c1.2-1.4,3-1.8,4.5-0.9C13.6,5.8,13.8,6.4,13.6,6.8L13.6,6.8z"/>	<path class="white" d="M18.4,6.8c0.2,0.3,0.6,0.4,0.9,0.2c1.1-0.6,2.3-0.3,3.2,0.7c0.3,0.3,0.6,0.4,0.9,0.2l0,0	c0.3-0.2,0.2-0.9-0.1-1.3c-1.2-1.4-3-1.8-4.5-0.9C18.4,5.8,18.2,6.4,18.4,6.8L18.4,6.8z"/>	</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve"> <path class="purple" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9	c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9	C32,2.2,29.8,0,27.1,0L27.1,0z"/>	<path class="white" d="M21.3,15.9H10.7c-1.5,0-2.7,1.2-2.7,2.7v3.5c0,1.5,1.2,2.7,2.7,2.7h10.6c1.5,0,2.7-1.2,2.7-2.7v-3.5	C24,17.1,22.8,15.9,21.3,15.9z M22.9,18.5v1.2h-2.6v-2.8h1C22.2,16.9,22.9,17.6,22.9,18.5z M15.4,20.8v2.8h-2.7v-2.8H15.4z M12.7,19.8v-2.8h2.7v2.8H12.7z M16.5,20.8h2.7v2.8h-2.7V20.8z M16.5,19.8v-2.8h2.7v2.8H16.5z M10.7,16.9h1v2.8H9.1v-1.2	C9.1,17.6,9.8,16.9,10.7,16.9z M9.1,22.1v-1.2h2.6v2.8h-1C9.8,23.7,9.1,22.9,9.1,22.1z M21.3,23.7h-1v-2.8h2.6v1.2	C22.9,22.9,22.2,23.7,21.3,23.7z"/>
<g>	<g>	<circle class="blue" cx="11.4" cy="12" r="1.2"/>	<g>	<path class="yellow" d="M14.7,11.1c-0.1,0-0.2,0-0.3-0.1L9.7,8.6C9.4,8.5,9.3,8.1,9.4,7.7c0.2-0.3,0.6-0.4,0.9-0.3L15,9.9	c0.3,0.2,0.4,0.6,0.3,0.9C15.2,11,15,11.1,14.7,11.1z"/>	</g>	</g>	<g>	<circle class="blue" cx="21.8" cy="12" r="1.2"/>	<g>	<path class="yellow" d="M18.5,11.1c0.1,0,0.2,0,0.3-0.1l4.7-2.4c0.3-0.2,0.4-0.6,0.3-0.9c-0.2-0.3-0.6-0.4-0.9-0.3l-4.7,2.4	c-0.3,0.2-0.4,0.6-0.3,0.9C18,11,18.2,11.1,18.5,11.1z"/>	</g>	</g>
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<g>	<path class="purple" d="M27.1,2.5c1.4,0,2.5,1.1,2.5,2.5v22.2c0,1.4-1.1,2.5-2.5,2.5H4.9c-1.4,0-2.5-1.1-2.5-2.5V4.9	c0-1.4,1.1-2.5,2.5-2.5H27.1 M27.1,0H4.9C2.2,0,0,2.2,0,4.9v22.2C0,29.8,2.2,32,4.9,32h22.2c2.7,0,4.9-2.2,4.9-4.9V4.9	C32,2.2,29.8,0,27.1,0L27.1,0z"/>	<g>	<path class="red" d="M15.9,18c2.9,0,5.3,2.2,5.3,5c0,0.4-0.4,0.8-0.8,0.8c-0.4,0-8.6,0-9,0c-0.4,0-0.8-0.4-0.8-0.8	C10.5,20.2,12.9,18,15.9,18z"/>	</g>	<g>	<g>	<path class="white" d="M9.6,14.2c-0.3,0-0.6-0.1-0.8-0.4c-0.3-0.4-0.2-1,0.3-1.3l1.5-1l-1.5-1.3C8.7,9.9,8.6,9.4,8.9,9	c0.3-0.4,0.9-0.5,1.3-0.1l2.5,2.1c0.2,0.2,0.4,0.5,0.3,0.8c0,0.3-0.2,0.6-0.4,0.7l-2.5,1.7C10,14.2,9.8,14.2,9.6,14.2z"/>	</g>	<g>	<path class="white" d="M22.1,14.2c-0.2,0-0.4-0.1-0.6-0.2L19,11.9c-0.2-0.2-0.4-0.5-0.3-0.8c0-0.3,0.2-0.6,0.4-0.7l2.5-1.7	c0.4-0.3,1-0.2,1.3,0.3c0.3,0.4,0.2,1-0.3,1.3l-1.5,1l1.5,1.3c0.4,0.3,0.5,0.9,0.1,1.3C22.6,14.1,22.3,14.2,22.1,14.2z"/>	</g>	</g>
</g>
</svg>
</body>
</html>

Step 7: styling an icon group - Script Codes CSS Codes

body{ background:#2D2E3F;
}
.purple{ fill:#DBA6F5;/*purple*/
}
.red{ fill:#F7696D;/*red*/
}
.blue{ fill:#41C2ED;/*blue*/
}
.yellow{ fill:#F7CE30;/*yellow*/
}
.white{ fill:#FFFFFF;
}
svg{ width:15%; height:15%;
}
Step 7: styling an icon group - Script Codes
Step 7: styling an icon group - Script Codes
Home Page Home
Developer Benedikte Vanderweeën
Username Benedikte
Uploaded January 21, 2023
Rating 4
Size 4,565 Kb
Views 2,024
Do you need developer help for Step 7: styling an icon group?

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!

Benedikte Vanderweeën (Benedikte) Script Codes
Create amazing Facebook ads 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!