Cil Keyboard Icon SVG
Cil Keyboard
Cil keyboard SVG Icon Code | Customize color
You can get svg icon cil keyboard in blue, white, red color and transparent color from below list. You can also customize color using color picker.
CustomizeSvg Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="var(--ci-primary-color, currentColor)" d="M472,80H40a24.028,24.028,0,0,0-24,24V344a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V104A24.028,24.028,0,0,0,472,80Zm-8,256H48V112H464Z" class="ci-primary"/> <rect width="160" height="32" x="144" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="80" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="400" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="336" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="368" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="304" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="240" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="176" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="112" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="336" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="400" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="272" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="208" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="144" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> <rect width="32" height="32" x="80" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"/> </svg> Svg Code
<svg style="color: white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="white" d="M472,80H40a24.028,24.028,0,0,0-24,24V344a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V104A24.028,24.028,0,0,0,472,80Zm-8,256H48V112H464Z" class="ci-primary"></path> <rect width="160" height="32" x="144" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="80" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="400" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="336" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="368" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="304" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="240" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="176" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="112" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="336" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="400" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="272" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="208" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="144" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="80" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> </svg> Svg Code
<svg style="color: red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="red" d="M472,80H40a24.028,24.028,0,0,0-24,24V344a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V104A24.028,24.028,0,0,0,472,80Zm-8,256H48V112H464Z" class="ci-primary"></path> <rect width="160" height="32" x="144" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="80" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="400" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="336" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="368" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="304" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="240" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="176" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="112" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="336" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="400" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="272" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="208" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="144" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="80" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> </svg> Svg Code
<svg style="color: blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="blue" d="M472,80H40a24.028,24.028,0,0,0-24,24V344a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V104A24.028,24.028,0,0,0,472,80Zm-8,256H48V112H464Z" class="ci-primary"></path> <rect width="160" height="32" x="144" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="80" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="400" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="336" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="368" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="304" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="240" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="176" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="112" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="336" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="400" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="272" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="208" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="144" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="80" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> </svg> Svg Code
<svg style="color: #f3da35" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="#f3da35" d="M472,80H40a24.028,24.028,0,0,0-24,24V344a24.028,24.028,0,0,0,24,24H472a24.028,24.028,0,0,0,24-24V104A24.028,24.028,0,0,0,472,80Zm-8,256H48V112H464Z" class="ci-primary"></path> <rect width="160" height="32" x="144" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="80" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="400" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="336" y="272" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="368" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="304" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="240" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="176" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="112" y="208" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="336" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="400" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="272" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="208" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="144" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> <rect width="32" height="32" x="80" y="144" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect> </svg> Advance Editor
You can edit cil keyboard as below. Change size color and background color of icon using below tool.
Advertisements
Advertisements