# binary icon Binary. Gentleface icon, drawn on the 16 px pixel grid. Free, MIT licensed. Page: https://gentleface.com/icons/binary - Category: Development - Use it for: binary, binary data, bits - Tags: binary, binary-data, bits, 1, digits, zeros-and-ones, code, developer - Family: braces, brackets, code, code-alert, code-block, code-eye, code-off, code-pencil, code-play, code-search, code-sparkle, parentheses - Component name: BinaryIcon - Added: 2026-10-16 ## Alternatives - `file-binary`: a binary file (binary-file) ## Also fits - binary file: binary data or bits without a file (binary) ## Files Each SVG is 16 × 16 with fill="currentColor". Keep it at 16 px or an exact multiple (32, 48) on whole pixels: a fractional size or position blurs it. - line-round: https://gentleface.com/svg/line-round/16/binary.svg · PNG https://gentleface.com/png/line-round/16/binary.png · https://gentleface.com/png/line-round/32/binary.png · https://gentleface.com/png/line-round/48/binary.png - line-soft: https://gentleface.com/svg/line-soft/16/binary.svg · PNG https://gentleface.com/png/line-soft/16/binary.png · https://gentleface.com/png/line-soft/32/binary.png · https://gentleface.com/png/line-soft/48/binary.png - line-sharp: https://gentleface.com/svg/line-sharp/16/binary.svg · PNG https://gentleface.com/png/line-sharp/16/binary.png · https://gentleface.com/png/line-sharp/32/binary.png · https://gentleface.com/png/line-sharp/48/binary.png - solid-round: https://gentleface.com/svg/solid-round/16/binary.svg · PNG https://gentleface.com/png/solid-round/16/binary.png · https://gentleface.com/png/solid-round/32/binary.png · https://gentleface.com/png/solid-round/48/binary.png - solid-soft: https://gentleface.com/svg/solid-soft/16/binary.svg · PNG https://gentleface.com/png/solid-soft/16/binary.png · https://gentleface.com/png/solid-soft/32/binary.png · https://gentleface.com/png/solid-soft/48/binary.png - solid-sharp: https://gentleface.com/svg/solid-sharp/16/binary.svg · PNG https://gentleface.com/png/solid-sharp/16/binary.png · https://gentleface.com/png/solid-sharp/32/binary.png · https://gentleface.com/png/solid-sharp/48/binary.png The SVG of every style: https://gentleface.com/icons/binary.json (`svg`). ## Code (line-round) The snippets are decorative (aria-hidden). For an icon that carries meaning on its own, such as an icon-only button, label the button, or give the SVG role="img" and an aria-label. For another style, take its SVG from the JSON and swap the path `d`. ### SVG ```svg ``` ### React ```tsx // Gentleface "binary" (line-round), MIT. https://gentleface.com/icons/binary import type { SVGProps } from 'react'; export function BinaryIcon(props: SVGProps) { return ( ); } ``` ### Vue ```vue ``` ### Svelte ```svelte ``` ### HTML img ```html

``` ### CSS ```css /* Gentleface "binary" (line-round), MIT. https://gentleface.com/icons/binary. Takes the text color. */ .icon-binary { display: inline-block; width: 16px; height: 16px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M12.5 6C12.641 6 12.759 6.048 12.856 6.144C12.952 6.241 13 6.359 13 6.5C13 6.641 12.952 6.759 12.856 6.856C12.759 6.952 12.641 7 12.5 7L10.5 7C10.359 7 10.241 6.952 10.144 6.856C10.048 6.759 10 6.641 10 6.5C10 6.359 10.048 6.241 10.144 6.144C10.241 6.048 10.359 6 10.5 6L11 6L11 3.707L10.854 3.854C10.754 3.953 10.636 4.003 10.5 4.003C10.364 4.003 10.246 3.953 10.146 3.854C10.049 3.756 10 3.638 10 3.5C10 3.362 10.049 3.244 10.146 3.146L11.146 2.146C11.246 2.047 11.364 1.997 11.5 1.997C11.636 1.997 11.754 2.047 11.854 2.146C11.951 2.244 12 2.362 12 2.5L12 6L12.5 6ZM5.895 6.052C5.818 6.245 5.707 6.414 5.561 6.561C5.414 6.707 5.245 6.818 5.052 6.895C4.875 6.965 4.691 7 4.5 7L3.5 7C3.309 7 3.125 6.965 2.948 6.895C2.755 6.818 2.586 6.707 2.439 6.561C2.293 6.414 2.182 6.245 2.105 6.052C2.035 5.875 2 5.691 2 5.5L2 3.5C2 3.309 2.035 3.125 2.105 2.948C2.182 2.755 2.293 2.586 2.439 2.439C2.586 2.293 2.755 2.182 2.948 2.105C3.125 2.035 3.309 2 3.5 2L4.5 2C4.691 2 4.875 2.035 5.052 2.105C5.245 2.182 5.414 2.293 5.561 2.439C5.707 2.586 5.818 2.755 5.895 2.948C5.965 3.125 6 3.309 6 3.5L6 5.5C6 5.691 5.965 5.875 5.895 6.052ZM3.146 5.854C3.244 5.951 3.362 6 3.5 6L4.5 6C4.638 6 4.756 5.951 4.854 5.854C4.951 5.756 5 5.638 5 5.5L5 3.5C5 3.362 4.951 3.244 4.854 3.146C4.756 3.049 4.638 3 4.5 3L3.5 3C3.362 3 3.244 3.049 3.146 3.146C3.049 3.244 3 3.362 3 3.5L3 5.5C3 5.638 3.049 5.756 3.146 5.854ZM5.5 12C5.641 12 5.759 12.048 5.856 12.144C5.952 12.241 6 12.359 6 12.5C6 12.641 5.952 12.759 5.856 12.856C5.759 12.952 5.641 13 5.5 13L3.5 13C3.359 13 3.241 12.952 3.144 12.856C3.048 12.759 3 12.641 3 12.5C3 12.359 3.048 12.241 3.144 12.144C3.241 12.048 3.359 12 3.5 12L4 12L4 9.707L3.854 9.854C3.756 9.951 3.638 10 3.5 10C3.362 10 3.244 9.951 3.146 9.854C3.047 9.754 2.997 9.636 2.997 9.5C2.997 9.364 3.047 9.246 3.146 9.146L4.146 8.146C4.246 8.047 4.364 7.997 4.5 7.997C4.636 7.997 4.754 8.047 4.854 8.146C4.951 8.244 5 8.362 5 8.5L5 12L5.5 12ZM12.895 12.052C12.818 12.245 12.707 12.414 12.561 12.561C12.414 12.707 12.245 12.818 12.052 12.895C11.875 12.965 11.691 13 11.5 13L10.5 13C10.309 13 10.125 12.965 9.948 12.895C9.755 12.818 9.586 12.707 9.439 12.561C9.293 12.414 9.182 12.245 9.105 12.052C9.035 11.875 9 11.691 9 11.5L9 9.5C9 9.309 9.035 9.125 9.105 8.948C9.182 8.755 9.293 8.586 9.439 8.439C9.586 8.293 9.755 8.182 9.948 8.105C10.125 8.035 10.309 8 10.5 8L11.5 8C11.691 8 11.875 8.035 12.052 8.105C12.245 8.182 12.414 8.293 12.561 8.439C12.707 8.586 12.818 8.755 12.895 8.948C12.965 9.125 13 9.309 13 9.5L13 11.5C13 11.691 12.965 11.875 12.895 12.052ZM10.146 11.854C10.244 11.951 10.362 12 10.5 12L11.5 12C11.638 12 11.756 11.951 11.854 11.854C11.951 11.756 12 11.638 12 11.5L12 9.5C12 9.362 11.951 9.244 11.854 9.146C11.756 9.049 11.638 9 11.5 9L10.5 9C10.362 9 10.244 9.049 10.146 9.146C10.049 9.244 10 9.362 10 9.5L10 11.5C10 11.638 10.049 11.756 10.146 11.854Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M12.5 6C12.641 6 12.759 6.048 12.856 6.144C12.952 6.241 13 6.359 13 6.5C13 6.641 12.952 6.759 12.856 6.856C12.759 6.952 12.641 7 12.5 7L10.5 7C10.359 7 10.241 6.952 10.144 6.856C10.048 6.759 10 6.641 10 6.5C10 6.359 10.048 6.241 10.144 6.144C10.241 6.048 10.359 6 10.5 6L11 6L11 3.707L10.854 3.854C10.754 3.953 10.636 4.003 10.5 4.003C10.364 4.003 10.246 3.953 10.146 3.854C10.049 3.756 10 3.638 10 3.5C10 3.362 10.049 3.244 10.146 3.146L11.146 2.146C11.246 2.047 11.364 1.997 11.5 1.997C11.636 1.997 11.754 2.047 11.854 2.146C11.951 2.244 12 2.362 12 2.5L12 6L12.5 6ZM5.895 6.052C5.818 6.245 5.707 6.414 5.561 6.561C5.414 6.707 5.245 6.818 5.052 6.895C4.875 6.965 4.691 7 4.5 7L3.5 7C3.309 7 3.125 6.965 2.948 6.895C2.755 6.818 2.586 6.707 2.439 6.561C2.293 6.414 2.182 6.245 2.105 6.052C2.035 5.875 2 5.691 2 5.5L2 3.5C2 3.309 2.035 3.125 2.105 2.948C2.182 2.755 2.293 2.586 2.439 2.439C2.586 2.293 2.755 2.182 2.948 2.105C3.125 2.035 3.309 2 3.5 2L4.5 2C4.691 2 4.875 2.035 5.052 2.105C5.245 2.182 5.414 2.293 5.561 2.439C5.707 2.586 5.818 2.755 5.895 2.948C5.965 3.125 6 3.309 6 3.5L6 5.5C6 5.691 5.965 5.875 5.895 6.052ZM3.146 5.854C3.244 5.951 3.362 6 3.5 6L4.5 6C4.638 6 4.756 5.951 4.854 5.854C4.951 5.756 5 5.638 5 5.5L5 3.5C5 3.362 4.951 3.244 4.854 3.146C4.756 3.049 4.638 3 4.5 3L3.5 3C3.362 3 3.244 3.049 3.146 3.146C3.049 3.244 3 3.362 3 3.5L3 5.5C3 5.638 3.049 5.756 3.146 5.854ZM5.5 12C5.641 12 5.759 12.048 5.856 12.144C5.952 12.241 6 12.359 6 12.5C6 12.641 5.952 12.759 5.856 12.856C5.759 12.952 5.641 13 5.5 13L3.5 13C3.359 13 3.241 12.952 3.144 12.856C3.048 12.759 3 12.641 3 12.5C3 12.359 3.048 12.241 3.144 12.144C3.241 12.048 3.359 12 3.5 12L4 12L4 9.707L3.854 9.854C3.756 9.951 3.638 10 3.5 10C3.362 10 3.244 9.951 3.146 9.854C3.047 9.754 2.997 9.636 2.997 9.5C2.997 9.364 3.047 9.246 3.146 9.146L4.146 8.146C4.246 8.047 4.364 7.997 4.5 7.997C4.636 7.997 4.754 8.047 4.854 8.146C4.951 8.244 5 8.362 5 8.5L5 12L5.5 12ZM12.895 12.052C12.818 12.245 12.707 12.414 12.561 12.561C12.414 12.707 12.245 12.818 12.052 12.895C11.875 12.965 11.691 13 11.5 13L10.5 13C10.309 13 10.125 12.965 9.948 12.895C9.755 12.818 9.586 12.707 9.439 12.561C9.293 12.414 9.182 12.245 9.105 12.052C9.035 11.875 9 11.691 9 11.5L9 9.5C9 9.309 9.035 9.125 9.105 8.948C9.182 8.755 9.293 8.586 9.439 8.439C9.586 8.293 9.755 8.182 9.948 8.105C10.125 8.035 10.309 8 10.5 8L11.5 8C11.691 8 11.875 8.035 12.052 8.105C12.245 8.182 12.414 8.293 12.561 8.439C12.707 8.586 12.818 8.755 12.895 8.948C12.965 9.125 13 9.309 13 9.5L13 11.5C13 11.691 12.965 11.875 12.895 12.052ZM10.146 11.854C10.244 11.951 10.362 12 10.5 12L11.5 12C11.638 12 11.756 11.951 11.854 11.854C11.951 11.756 12 11.638 12 11.5L12 9.5C12 9.362 11.951 9.244 11.854 9.146C11.756 9.049 11.638 9 11.5 9L10.5 9C10.362 9 10.244 9.049 10.146 9.146C10.049 9.244 10 9.362 10 9.5L10 11.5C10 11.638 10.049 11.756 10.146 11.854Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat; } ``` ### Data URL ```text data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='currentColor'%3E%3Cpath d='M12.5 6C12.641 6 12.759 6.048 12.856 6.144C12.952 6.241 13 6.359 13 6.5C13 6.641 12.952 6.759 12.856 6.856C12.759 6.952 12.641 7 12.5 7L10.5 7C10.359 7 10.241 6.952 10.144 6.856C10.048 6.759 10 6.641 10 6.5C10 6.359 10.048 6.241 10.144 6.144C10.241 6.048 10.359 6 10.5 6L11 6L11 3.707L10.854 3.854C10.754 3.953 10.636 4.003 10.5 4.003C10.364 4.003 10.246 3.953 10.146 3.854C10.049 3.756 10 3.638 10 3.5C10 3.362 10.049 3.244 10.146 3.146L11.146 2.146C11.246 2.047 11.364 1.997 11.5 1.997C11.636 1.997 11.754 2.047 11.854 2.146C11.951 2.244 12 2.362 12 2.5L12 6L12.5 6ZM5.895 6.052C5.818 6.245 5.707 6.414 5.561 6.561C5.414 6.707 5.245 6.818 5.052 6.895C4.875 6.965 4.691 7 4.5 7L3.5 7C3.309 7 3.125 6.965 2.948 6.895C2.755 6.818 2.586 6.707 2.439 6.561C2.293 6.414 2.182 6.245 2.105 6.052C2.035 5.875 2 5.691 2 5.5L2 3.5C2 3.309 2.035 3.125 2.105 2.948C2.182 2.755 2.293 2.586 2.439 2.439C2.586 2.293 2.755 2.182 2.948 2.105C3.125 2.035 3.309 2 3.5 2L4.5 2C4.691 2 4.875 2.035 5.052 2.105C5.245 2.182 5.414 2.293 5.561 2.439C5.707 2.586 5.818 2.755 5.895 2.948C5.965 3.125 6 3.309 6 3.5L6 5.5C6 5.691 5.965 5.875 5.895 6.052ZM3.146 5.854C3.244 5.951 3.362 6 3.5 6L4.5 6C4.638 6 4.756 5.951 4.854 5.854C4.951 5.756 5 5.638 5 5.5L5 3.5C5 3.362 4.951 3.244 4.854 3.146C4.756 3.049 4.638 3 4.5 3L3.5 3C3.362 3 3.244 3.049 3.146 3.146C3.049 3.244 3 3.362 3 3.5L3 5.5C3 5.638 3.049 5.756 3.146 5.854ZM5.5 12C5.641 12 5.759 12.048 5.856 12.144C5.952 12.241 6 12.359 6 12.5C6 12.641 5.952 12.759 5.856 12.856C5.759 12.952 5.641 13 5.5 13L3.5 13C3.359 13 3.241 12.952 3.144 12.856C3.048 12.759 3 12.641 3 12.5C3 12.359 3.048 12.241 3.144 12.144C3.241 12.048 3.359 12 3.5 12L4 12L4 9.707L3.854 9.854C3.756 9.951 3.638 10 3.5 10C3.362 10 3.244 9.951 3.146 9.854C3.047 9.754 2.997 9.636 2.997 9.5C2.997 9.364 3.047 9.246 3.146 9.146L4.146 8.146C4.246 8.047 4.364 7.997 4.5 7.997C4.636 7.997 4.754 8.047 4.854 8.146C4.951 8.244 5 8.362 5 8.5L5 12L5.5 12ZM12.895 12.052C12.818 12.245 12.707 12.414 12.561 12.561C12.414 12.707 12.245 12.818 12.052 12.895C11.875 12.965 11.691 13 11.5 13L10.5 13C10.309 13 10.125 12.965 9.948 12.895C9.755 12.818 9.586 12.707 9.439 12.561C9.293 12.414 9.182 12.245 9.105 12.052C9.035 11.875 9 11.691 9 11.5L9 9.5C9 9.309 9.035 9.125 9.105 8.948C9.182 8.755 9.293 8.586 9.439 8.439C9.586 8.293 9.755 8.182 9.948 8.105C10.125 8.035 10.309 8 10.5 8L11.5 8C11.691 8 11.875 8.035 12.052 8.105C12.245 8.182 12.414 8.293 12.561 8.439C12.707 8.586 12.818 8.755 12.895 8.948C12.965 9.125 13 9.309 13 9.5L13 11.5C13 11.691 12.965 11.875 12.895 12.052ZM10.146 11.854C10.244 11.951 10.362 12 10.5 12L11.5 12C11.638 12 11.756 11.951 11.854 11.854C11.951 11.756 12 11.638 12 11.5L12 9.5C12 9.362 11.951 9.244 11.854 9.146C11.756 9.049 11.638 9 11.5 9L10.5 9C10.362 9 10.244 9.049 10.146 9.146C10.049 9.244 10 9.362 10 9.5L10 11.5C10 11.638 10.049 11.756 10.146 11.854Z'/%3E%3C/svg%3E ``` ### Sprite ```html ``` ### SwiftUI ```swift // Gentleface "binary" (line-round), MIT. https://gentleface.com/icons/binary import SwiftUI struct BinaryIcon: Shape { func path(in rect: CGRect) -> Path { var p = Path() p.move(to: CGPoint(x: 12.5, y: 6)) p.addCurve(to: CGPoint(x: 12.856, y: 6.144), control1: CGPoint(x: 12.641, y: 6), control2: CGPoint(x: 12.759, y: 6.048)) p.addCurve(to: CGPoint(x: 13, y: 6.5), control1: CGPoint(x: 12.952, y: 6.241), control2: CGPoint(x: 13, y: 6.359)) p.addCurve(to: CGPoint(x: 12.856, y: 6.856), control1: CGPoint(x: 13, y: 6.641), control2: CGPoint(x: 12.952, y: 6.759)) p.addCurve(to: CGPoint(x: 12.5, y: 7), control1: CGPoint(x: 12.759, y: 6.952), control2: CGPoint(x: 12.641, y: 7)) p.addLine(to: CGPoint(x: 10.5, y: 7)) p.addCurve(to: CGPoint(x: 10.144, y: 6.856), control1: CGPoint(x: 10.359, y: 7), control2: CGPoint(x: 10.241, y: 6.952)) p.addCurve(to: CGPoint(x: 10, y: 6.5), control1: CGPoint(x: 10.048, y: 6.759), control2: CGPoint(x: 10, y: 6.641)) p.addCurve(to: CGPoint(x: 10.144, y: 6.144), control1: CGPoint(x: 10, y: 6.359), control2: CGPoint(x: 10.048, y: 6.241)) p.addCurve(to: CGPoint(x: 10.5, y: 6), control1: CGPoint(x: 10.241, y: 6.048), control2: CGPoint(x: 10.359, y: 6)) p.addLine(to: CGPoint(x: 11, y: 6)) p.addLine(to: CGPoint(x: 11, y: 3.707)) p.addLine(to: CGPoint(x: 10.854, y: 3.854)) p.addCurve(to: CGPoint(x: 10.5, y: 4.003), control1: CGPoint(x: 10.754, y: 3.953), control2: CGPoint(x: 10.636, y: 4.003)) p.addCurve(to: CGPoint(x: 10.146, y: 3.854), control1: CGPoint(x: 10.364, y: 4.003), control2: CGPoint(x: 10.246, y: 3.953)) p.addCurve(to: CGPoint(x: 10, y: 3.5), control1: CGPoint(x: 10.049, y: 3.756), control2: CGPoint(x: 10, y: 3.638)) p.addCurve(to: CGPoint(x: 10.146, y: 3.146), control1: CGPoint(x: 10, y: 3.362), control2: CGPoint(x: 10.049, y: 3.244)) p.addLine(to: CGPoint(x: 11.146, y: 2.146)) p.addCurve(to: CGPoint(x: 11.5, y: 1.997), control1: CGPoint(x: 11.246, y: 2.047), control2: CGPoint(x: 11.364, y: 1.997)) p.addCurve(to: CGPoint(x: 11.854, y: 2.146), control1: CGPoint(x: 11.636, y: 1.997), control2: CGPoint(x: 11.754, y: 2.047)) p.addCurve(to: CGPoint(x: 12, y: 2.5), control1: CGPoint(x: 11.951, y: 2.244), control2: CGPoint(x: 12, y: 2.362)) p.addLine(to: CGPoint(x: 12, y: 6)) p.addLine(to: CGPoint(x: 12.5, y: 6)) p.closeSubpath() p.move(to: CGPoint(x: 5.895, y: 6.052)) p.addCurve(to: CGPoint(x: 5.561, y: 6.561), control1: CGPoint(x: 5.818, y: 6.245), control2: CGPoint(x: 5.707, y: 6.414)) p.addCurve(to: CGPoint(x: 5.052, y: 6.895), control1: CGPoint(x: 5.414, y: 6.707), control2: CGPoint(x: 5.245, y: 6.818)) p.addCurve(to: CGPoint(x: 4.5, y: 7), control1: CGPoint(x: 4.875, y: 6.965), control2: CGPoint(x: 4.691, y: 7)) p.addLine(to: CGPoint(x: 3.5, y: 7)) p.addCurve(to: CGPoint(x: 2.948, y: 6.895), control1: CGPoint(x: 3.309, y: 7), control2: CGPoint(x: 3.125, y: 6.965)) p.addCurve(to: CGPoint(x: 2.439, y: 6.561), control1: CGPoint(x: 2.755, y: 6.818), control2: CGPoint(x: 2.586, y: 6.707)) p.addCurve(to: CGPoint(x: 2.105, y: 6.052), control1: CGPoint(x: 2.293, y: 6.414), control2: CGPoint(x: 2.182, y: 6.245)) p.addCurve(to: CGPoint(x: 2, y: 5.5), control1: CGPoint(x: 2.035, y: 5.875), control2: CGPoint(x: 2, y: 5.691)) p.addLine(to: CGPoint(x: 2, y: 3.5)) p.addCurve(to: CGPoint(x: 2.105, y: 2.948), control1: CGPoint(x: 2, y: 3.309), control2: CGPoint(x: 2.035, y: 3.125)) p.addCurve(to: CGPoint(x: 2.439, y: 2.439), control1: CGPoint(x: 2.182, y: 2.755), control2: CGPoint(x: 2.293, y: 2.586)) p.addCurve(to: CGPoint(x: 2.948, y: 2.105), control1: CGPoint(x: 2.586, y: 2.293), control2: CGPoint(x: 2.755, y: 2.182)) p.addCurve(to: CGPoint(x: 3.5, y: 2), control1: CGPoint(x: 3.125, y: 2.035), control2: CGPoint(x: 3.309, y: 2)) p.addLine(to: CGPoint(x: 4.5, y: 2)) p.addCurve(to: CGPoint(x: 5.052, y: 2.105), control1: CGPoint(x: 4.691, y: 2), control2: CGPoint(x: 4.875, y: 2.035)) p.addCurve(to: CGPoint(x: 5.561, y: 2.439), control1: CGPoint(x: 5.245, y: 2.182), control2: CGPoint(x: 5.414, y: 2.293)) p.addCurve(to: CGPoint(x: 5.895, y: 2.948), control1: CGPoint(x: 5.707, y: 2.586), control2: CGPoint(x: 5.818, y: 2.755)) p.addCurve(to: CGPoint(x: 6, y: 3.5), control1: CGPoint(x: 5.965, y: 3.125), control2: CGPoint(x: 6, y: 3.309)) p.addLine(to: CGPoint(x: 6, y: 5.5)) p.addCurve(to: CGPoint(x: 5.895, y: 6.052), control1: CGPoint(x: 6, y: 5.691), control2: CGPoint(x: 5.965, y: 5.875)) p.closeSubpath() p.move(to: CGPoint(x: 3.146, y: 5.854)) p.addCurve(to: CGPoint(x: 3.5, y: 6), control1: CGPoint(x: 3.244, y: 5.951), control2: CGPoint(x: 3.362, y: 6)) p.addLine(to: CGPoint(x: 4.5, y: 6)) p.addCurve(to: CGPoint(x: 4.854, y: 5.854), control1: CGPoint(x: 4.638, y: 6), control2: CGPoint(x: 4.756, y: 5.951)) p.addCurve(to: CGPoint(x: 5, y: 5.5), control1: CGPoint(x: 4.951, y: 5.756), control2: CGPoint(x: 5, y: 5.638)) p.addLine(to: CGPoint(x: 5, y: 3.5)) p.addCurve(to: CGPoint(x: 4.854, y: 3.146), control1: CGPoint(x: 5, y: 3.362), control2: CGPoint(x: 4.951, y: 3.244)) p.addCurve(to: CGPoint(x: 4.5, y: 3), control1: CGPoint(x: 4.756, y: 3.049), control2: CGPoint(x: 4.638, y: 3)) p.addLine(to: CGPoint(x: 3.5, y: 3)) p.addCurve(to: CGPoint(x: 3.146, y: 3.146), control1: CGPoint(x: 3.362, y: 3), control2: CGPoint(x: 3.244, y: 3.049)) p.addCurve(to: CGPoint(x: 3, y: 3.5), control1: CGPoint(x: 3.049, y: 3.244), control2: CGPoint(x: 3, y: 3.362)) p.addLine(to: CGPoint(x: 3, y: 5.5)) p.addCurve(to: CGPoint(x: 3.146, y: 5.854), control1: CGPoint(x: 3, y: 5.638), control2: CGPoint(x: 3.049, y: 5.756)) p.closeSubpath() p.move(to: CGPoint(x: 5.5, y: 12)) p.addCurve(to: CGPoint(x: 5.856, y: 12.144), control1: CGPoint(x: 5.641, y: 12), control2: CGPoint(x: 5.759, y: 12.048)) p.addCurve(to: CGPoint(x: 6, y: 12.5), control1: CGPoint(x: 5.952, y: 12.241), control2: CGPoint(x: 6, y: 12.359)) p.addCurve(to: CGPoint(x: 5.856, y: 12.856), control1: CGPoint(x: 6, y: 12.641), control2: CGPoint(x: 5.952, y: 12.759)) p.addCurve(to: CGPoint(x: 5.5, y: 13), control1: CGPoint(x: 5.759, y: 12.952), control2: CGPoint(x: 5.641, y: 13)) p.addLine(to: CGPoint(x: 3.5, y: 13)) p.addCurve(to: CGPoint(x: 3.144, y: 12.856), control1: CGPoint(x: 3.359, y: 13), control2: CGPoint(x: 3.241, y: 12.952)) p.addCurve(to: CGPoint(x: 3, y: 12.5), control1: CGPoint(x: 3.048, y: 12.759), control2: CGPoint(x: 3, y: 12.641)) p.addCurve(to: CGPoint(x: 3.144, y: 12.144), control1: CGPoint(x: 3, y: 12.359), control2: CGPoint(x: 3.048, y: 12.241)) p.addCurve(to: CGPoint(x: 3.5, y: 12), control1: CGPoint(x: 3.241, y: 12.048), control2: CGPoint(x: 3.359, y: 12)) p.addLine(to: CGPoint(x: 4, y: 12)) p.addLine(to: CGPoint(x: 4, y: 9.707)) p.addLine(to: CGPoint(x: 3.854, y: 9.854)) p.addCurve(to: CGPoint(x: 3.5, y: 10), control1: CGPoint(x: 3.756, y: 9.951), control2: CGPoint(x: 3.638, y: 10)) p.addCurve(to: CGPoint(x: 3.146, y: 9.854), control1: CGPoint(x: 3.362, y: 10), control2: CGPoint(x: 3.244, y: 9.951)) p.addCurve(to: CGPoint(x: 2.997, y: 9.5), control1: CGPoint(x: 3.047, y: 9.754), control2: CGPoint(x: 2.997, y: 9.636)) p.addCurve(to: CGPoint(x: 3.146, y: 9.146), control1: CGPoint(x: 2.997, y: 9.364), control2: CGPoint(x: 3.047, y: 9.246)) p.addLine(to: CGPoint(x: 4.146, y: 8.146)) p.addCurve(to: CGPoint(x: 4.5, y: 7.997), control1: CGPoint(x: 4.246, y: 8.047), control2: CGPoint(x: 4.364, y: 7.997)) p.addCurve(to: CGPoint(x: 4.854, y: 8.146), control1: CGPoint(x: 4.636, y: 7.997), control2: CGPoint(x: 4.754, y: 8.047)) p.addCurve(to: CGPoint(x: 5, y: 8.5), control1: CGPoint(x: 4.951, y: 8.244), control2: CGPoint(x: 5, y: 8.362)) p.addLine(to: CGPoint(x: 5, y: 12)) p.addLine(to: CGPoint(x: 5.5, y: 12)) p.closeSubpath() p.move(to: CGPoint(x: 12.895, y: 12.052)) p.addCurve(to: CGPoint(x: 12.561, y: 12.561), control1: CGPoint(x: 12.818, y: 12.245), control2: CGPoint(x: 12.707, y: 12.414)) p.addCurve(to: CGPoint(x: 12.052, y: 12.895), control1: CGPoint(x: 12.414, y: 12.707), control2: CGPoint(x: 12.245, y: 12.818)) p.addCurve(to: CGPoint(x: 11.5, y: 13), control1: CGPoint(x: 11.875, y: 12.965), control2: CGPoint(x: 11.691, y: 13)) p.addLine(to: CGPoint(x: 10.5, y: 13)) p.addCurve(to: CGPoint(x: 9.948, y: 12.895), control1: CGPoint(x: 10.309, y: 13), control2: CGPoint(x: 10.125, y: 12.965)) p.addCurve(to: CGPoint(x: 9.439, y: 12.561), control1: CGPoint(x: 9.755, y: 12.818), control2: CGPoint(x: 9.586, y: 12.707)) p.addCurve(to: CGPoint(x: 9.105, y: 12.052), control1: CGPoint(x: 9.293, y: 12.414), control2: CGPoint(x: 9.182, y: 12.245)) p.addCurve(to: CGPoint(x: 9, y: 11.5), control1: CGPoint(x: 9.035, y: 11.875), control2: CGPoint(x: 9, y: 11.691)) p.addLine(to: CGPoint(x: 9, y: 9.5)) p.addCurve(to: CGPoint(x: 9.105, y: 8.948), control1: CGPoint(x: 9, y: 9.309), control2: CGPoint(x: 9.035, y: 9.125)) p.addCurve(to: CGPoint(x: 9.439, y: 8.439), control1: CGPoint(x: 9.182, y: 8.755), control2: CGPoint(x: 9.293, y: 8.586)) p.addCurve(to: CGPoint(x: 9.948, y: 8.105), control1: CGPoint(x: 9.586, y: 8.293), control2: CGPoint(x: 9.755, y: 8.182)) p.addCurve(to: CGPoint(x: 10.5, y: 8), control1: CGPoint(x: 10.125, y: 8.035), control2: CGPoint(x: 10.309, y: 8)) p.addLine(to: CGPoint(x: 11.5, y: 8)) p.addCurve(to: CGPoint(x: 12.052, y: 8.105), control1: CGPoint(x: 11.691, y: 8), control2: CGPoint(x: 11.875, y: 8.035)) p.addCurve(to: CGPoint(x: 12.561, y: 8.439), control1: CGPoint(x: 12.245, y: 8.182), control2: CGPoint(x: 12.414, y: 8.293)) p.addCurve(to: CGPoint(x: 12.895, y: 8.948), control1: CGPoint(x: 12.707, y: 8.586), control2: CGPoint(x: 12.818, y: 8.755)) p.addCurve(to: CGPoint(x: 13, y: 9.5), control1: CGPoint(x: 12.965, y: 9.125), control2: CGPoint(x: 13, y: 9.309)) p.addLine(to: CGPoint(x: 13, y: 11.5)) p.addCurve(to: CGPoint(x: 12.895, y: 12.052), control1: CGPoint(x: 13, y: 11.691), control2: CGPoint(x: 12.965, y: 11.875)) p.closeSubpath() p.move(to: CGPoint(x: 10.146, y: 11.854)) p.addCurve(to: CGPoint(x: 10.5, y: 12), control1: CGPoint(x: 10.244, y: 11.951), control2: CGPoint(x: 10.362, y: 12)) p.addLine(to: CGPoint(x: 11.5, y: 12)) p.addCurve(to: CGPoint(x: 11.854, y: 11.854), control1: CGPoint(x: 11.638, y: 12), control2: CGPoint(x: 11.756, y: 11.951)) p.addCurve(to: CGPoint(x: 12, y: 11.5), control1: CGPoint(x: 11.951, y: 11.756), control2: CGPoint(x: 12, y: 11.638)) p.addLine(to: CGPoint(x: 12, y: 9.5)) p.addCurve(to: CGPoint(x: 11.854, y: 9.146), control1: CGPoint(x: 12, y: 9.362), control2: CGPoint(x: 11.951, y: 9.244)) p.addCurve(to: CGPoint(x: 11.5, y: 9), control1: CGPoint(x: 11.756, y: 9.049), control2: CGPoint(x: 11.638, y: 9)) p.addLine(to: CGPoint(x: 10.5, y: 9)) p.addCurve(to: CGPoint(x: 10.146, y: 9.146), control1: CGPoint(x: 10.362, y: 9), control2: CGPoint(x: 10.244, y: 9.049)) p.addCurve(to: CGPoint(x: 10, y: 9.5), control1: CGPoint(x: 10.049, y: 9.244), control2: CGPoint(x: 10, y: 9.362)) p.addLine(to: CGPoint(x: 10, y: 11.5)) p.addCurve(to: CGPoint(x: 10.146, y: 11.854), control1: CGPoint(x: 10, y: 11.638), control2: CGPoint(x: 10.049, y: 11.756)) p.closeSubpath() return p.applying(CGAffineTransform(scaleX: rect.width / 16, y: rect.height / 16)) } } // BinaryIcon().frame(width: 16, height: 16) fills with the foreground style. Keep it on whole points to stay crisp. ``` ### Compose ```kotlin // Gentleface "binary" (line-round), MIT. https://gentleface.com/icons/binary import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.addPathNodes import androidx.compose.ui.unit.dp val BinaryIcon: ImageVector by lazy { ImageVector.Builder( name = "binary", defaultWidth = 16.dp, defaultHeight = 16.dp, viewportWidth = 16f, viewportHeight = 16f, ).addPath( pathData = addPathNodes("M12.5 6C12.641 6 12.759 6.048 12.856 6.144C12.952 6.241 13 6.359 13 6.5C13 6.641 12.952 6.759 12.856 6.856C12.759 6.952 12.641 7 12.5 7L10.5 7C10.359 7 10.241 6.952 10.144 6.856C10.048 6.759 10 6.641 10 6.5C10 6.359 10.048 6.241 10.144 6.144C10.241 6.048 10.359 6 10.5 6L11 6L11 3.707L10.854 3.854C10.754 3.953 10.636 4.003 10.5 4.003C10.364 4.003 10.246 3.953 10.146 3.854C10.049 3.756 10 3.638 10 3.5C10 3.362 10.049 3.244 10.146 3.146L11.146 2.146C11.246 2.047 11.364 1.997 11.5 1.997C11.636 1.997 11.754 2.047 11.854 2.146C11.951 2.244 12 2.362 12 2.5L12 6L12.5 6ZM5.895 6.052C5.818 6.245 5.707 6.414 5.561 6.561C5.414 6.707 5.245 6.818 5.052 6.895C4.875 6.965 4.691 7 4.5 7L3.5 7C3.309 7 3.125 6.965 2.948 6.895C2.755 6.818 2.586 6.707 2.439 6.561C2.293 6.414 2.182 6.245 2.105 6.052C2.035 5.875 2 5.691 2 5.5L2 3.5C2 3.309 2.035 3.125 2.105 2.948C2.182 2.755 2.293 2.586 2.439 2.439C2.586 2.293 2.755 2.182 2.948 2.105C3.125 2.035 3.309 2 3.5 2L4.5 2C4.691 2 4.875 2.035 5.052 2.105C5.245 2.182 5.414 2.293 5.561 2.439C5.707 2.586 5.818 2.755 5.895 2.948C5.965 3.125 6 3.309 6 3.5L6 5.5C6 5.691 5.965 5.875 5.895 6.052ZM3.146 5.854C3.244 5.951 3.362 6 3.5 6L4.5 6C4.638 6 4.756 5.951 4.854 5.854C4.951 5.756 5 5.638 5 5.5L5 3.5C5 3.362 4.951 3.244 4.854 3.146C4.756 3.049 4.638 3 4.5 3L3.5 3C3.362 3 3.244 3.049 3.146 3.146C3.049 3.244 3 3.362 3 3.5L3 5.5C3 5.638 3.049 5.756 3.146 5.854ZM5.5 12C5.641 12 5.759 12.048 5.856 12.144C5.952 12.241 6 12.359 6 12.5C6 12.641 5.952 12.759 5.856 12.856C5.759 12.952 5.641 13 5.5 13L3.5 13C3.359 13 3.241 12.952 3.144 12.856C3.048 12.759 3 12.641 3 12.5C3 12.359 3.048 12.241 3.144 12.144C3.241 12.048 3.359 12 3.5 12L4 12L4 9.707L3.854 9.854C3.756 9.951 3.638 10 3.5 10C3.362 10 3.244 9.951 3.146 9.854C3.047 9.754 2.997 9.636 2.997 9.5C2.997 9.364 3.047 9.246 3.146 9.146L4.146 8.146C4.246 8.047 4.364 7.997 4.5 7.997C4.636 7.997 4.754 8.047 4.854 8.146C4.951 8.244 5 8.362 5 8.5L5 12L5.5 12ZM12.895 12.052C12.818 12.245 12.707 12.414 12.561 12.561C12.414 12.707 12.245 12.818 12.052 12.895C11.875 12.965 11.691 13 11.5 13L10.5 13C10.309 13 10.125 12.965 9.948 12.895C9.755 12.818 9.586 12.707 9.439 12.561C9.293 12.414 9.182 12.245 9.105 12.052C9.035 11.875 9 11.691 9 11.5L9 9.5C9 9.309 9.035 9.125 9.105 8.948C9.182 8.755 9.293 8.586 9.439 8.439C9.586 8.293 9.755 8.182 9.948 8.105C10.125 8.035 10.309 8 10.5 8L11.5 8C11.691 8 11.875 8.035 12.052 8.105C12.245 8.182 12.414 8.293 12.561 8.439C12.707 8.586 12.818 8.755 12.895 8.948C12.965 9.125 13 9.309 13 9.5L13 11.5C13 11.691 12.965 11.875 12.895 12.052ZM10.146 11.854C10.244 11.951 10.362 12 10.5 12L11.5 12C11.638 12 11.756 11.951 11.854 11.854C11.951 11.756 12 11.638 12 11.5L12 9.5C12 9.362 11.951 9.244 11.854 9.146C11.756 9.049 11.638 9 11.5 9L10.5 9C10.362 9 10.244 9.049 10.146 9.146C10.049 9.244 10 9.362 10 9.5L10 11.5C10 11.638 10.049 11.756 10.146 11.854Z"), fill = SolidColor(Color.Black), ).build() } // Icon(BinaryIcon, contentDescription = null) tints it with LocalContentColor. ``` ### Android XML ```xml ``` ### Flutter ```dart // Gentleface "binary" (line-round), MIT. https://gentleface.com/icons/binary import 'package:flutter/widgets.dart'; class BinaryIcon extends StatelessWidget { const BinaryIcon({super.key, this.size = 16, this.color}); final double size; final Color? color; @override Widget build(BuildContext context) => CustomPaint( size: Size.square(size), painter: _BinaryIconPainter(color ?? IconTheme.of(context).color ?? const Color(0xFF000000)), ); } class _BinaryIconPainter extends CustomPainter { _BinaryIconPainter(this.color); final Color color; @override void paint(Canvas canvas, Size size) { canvas.scale(size.width / 16, size.height / 16); final p = Path() ..moveTo(12.5, 6) ..cubicTo(12.641, 6, 12.759, 6.048, 12.856, 6.144) ..cubicTo(12.952, 6.241, 13, 6.359, 13, 6.5) ..cubicTo(13, 6.641, 12.952, 6.759, 12.856, 6.856) ..cubicTo(12.759, 6.952, 12.641, 7, 12.5, 7) ..lineTo(10.5, 7) ..cubicTo(10.359, 7, 10.241, 6.952, 10.144, 6.856) ..cubicTo(10.048, 6.759, 10, 6.641, 10, 6.5) ..cubicTo(10, 6.359, 10.048, 6.241, 10.144, 6.144) ..cubicTo(10.241, 6.048, 10.359, 6, 10.5, 6) ..lineTo(11, 6) ..lineTo(11, 3.707) ..lineTo(10.854, 3.854) ..cubicTo(10.754, 3.953, 10.636, 4.003, 10.5, 4.003) ..cubicTo(10.364, 4.003, 10.246, 3.953, 10.146, 3.854) ..cubicTo(10.049, 3.756, 10, 3.638, 10, 3.5) ..cubicTo(10, 3.362, 10.049, 3.244, 10.146, 3.146) ..lineTo(11.146, 2.146) ..cubicTo(11.246, 2.047, 11.364, 1.997, 11.5, 1.997) ..cubicTo(11.636, 1.997, 11.754, 2.047, 11.854, 2.146) ..cubicTo(11.951, 2.244, 12, 2.362, 12, 2.5) ..lineTo(12, 6) ..lineTo(12.5, 6) ..close() ..moveTo(5.895, 6.052) ..cubicTo(5.818, 6.245, 5.707, 6.414, 5.561, 6.561) ..cubicTo(5.414, 6.707, 5.245, 6.818, 5.052, 6.895) ..cubicTo(4.875, 6.965, 4.691, 7, 4.5, 7) ..lineTo(3.5, 7) ..cubicTo(3.309, 7, 3.125, 6.965, 2.948, 6.895) ..cubicTo(2.755, 6.818, 2.586, 6.707, 2.439, 6.561) ..cubicTo(2.293, 6.414, 2.182, 6.245, 2.105, 6.052) ..cubicTo(2.035, 5.875, 2, 5.691, 2, 5.5) ..lineTo(2, 3.5) ..cubicTo(2, 3.309, 2.035, 3.125, 2.105, 2.948) ..cubicTo(2.182, 2.755, 2.293, 2.586, 2.439, 2.439) ..cubicTo(2.586, 2.293, 2.755, 2.182, 2.948, 2.105) ..cubicTo(3.125, 2.035, 3.309, 2, 3.5, 2) ..lineTo(4.5, 2) ..cubicTo(4.691, 2, 4.875, 2.035, 5.052, 2.105) ..cubicTo(5.245, 2.182, 5.414, 2.293, 5.561, 2.439) ..cubicTo(5.707, 2.586, 5.818, 2.755, 5.895, 2.948) ..cubicTo(5.965, 3.125, 6, 3.309, 6, 3.5) ..lineTo(6, 5.5) ..cubicTo(6, 5.691, 5.965, 5.875, 5.895, 6.052) ..close() ..moveTo(3.146, 5.854) ..cubicTo(3.244, 5.951, 3.362, 6, 3.5, 6) ..lineTo(4.5, 6) ..cubicTo(4.638, 6, 4.756, 5.951, 4.854, 5.854) ..cubicTo(4.951, 5.756, 5, 5.638, 5, 5.5) ..lineTo(5, 3.5) ..cubicTo(5, 3.362, 4.951, 3.244, 4.854, 3.146) ..cubicTo(4.756, 3.049, 4.638, 3, 4.5, 3) ..lineTo(3.5, 3) ..cubicTo(3.362, 3, 3.244, 3.049, 3.146, 3.146) ..cubicTo(3.049, 3.244, 3, 3.362, 3, 3.5) ..lineTo(3, 5.5) ..cubicTo(3, 5.638, 3.049, 5.756, 3.146, 5.854) ..close() ..moveTo(5.5, 12) ..cubicTo(5.641, 12, 5.759, 12.048, 5.856, 12.144) ..cubicTo(5.952, 12.241, 6, 12.359, 6, 12.5) ..cubicTo(6, 12.641, 5.952, 12.759, 5.856, 12.856) ..cubicTo(5.759, 12.952, 5.641, 13, 5.5, 13) ..lineTo(3.5, 13) ..cubicTo(3.359, 13, 3.241, 12.952, 3.144, 12.856) ..cubicTo(3.048, 12.759, 3, 12.641, 3, 12.5) ..cubicTo(3, 12.359, 3.048, 12.241, 3.144, 12.144) ..cubicTo(3.241, 12.048, 3.359, 12, 3.5, 12) ..lineTo(4, 12) ..lineTo(4, 9.707) ..lineTo(3.854, 9.854) ..cubicTo(3.756, 9.951, 3.638, 10, 3.5, 10) ..cubicTo(3.362, 10, 3.244, 9.951, 3.146, 9.854) ..cubicTo(3.047, 9.754, 2.997, 9.636, 2.997, 9.5) ..cubicTo(2.997, 9.364, 3.047, 9.246, 3.146, 9.146) ..lineTo(4.146, 8.146) ..cubicTo(4.246, 8.047, 4.364, 7.997, 4.5, 7.997) ..cubicTo(4.636, 7.997, 4.754, 8.047, 4.854, 8.146) ..cubicTo(4.951, 8.244, 5, 8.362, 5, 8.5) ..lineTo(5, 12) ..lineTo(5.5, 12) ..close() ..moveTo(12.895, 12.052) ..cubicTo(12.818, 12.245, 12.707, 12.414, 12.561, 12.561) ..cubicTo(12.414, 12.707, 12.245, 12.818, 12.052, 12.895) ..cubicTo(11.875, 12.965, 11.691, 13, 11.5, 13) ..lineTo(10.5, 13) ..cubicTo(10.309, 13, 10.125, 12.965, 9.948, 12.895) ..cubicTo(9.755, 12.818, 9.586, 12.707, 9.439, 12.561) ..cubicTo(9.293, 12.414, 9.182, 12.245, 9.105, 12.052) ..cubicTo(9.035, 11.875, 9, 11.691, 9, 11.5) ..lineTo(9, 9.5) ..cubicTo(9, 9.309, 9.035, 9.125, 9.105, 8.948) ..cubicTo(9.182, 8.755, 9.293, 8.586, 9.439, 8.439) ..cubicTo(9.586, 8.293, 9.755, 8.182, 9.948, 8.105) ..cubicTo(10.125, 8.035, 10.309, 8, 10.5, 8) ..lineTo(11.5, 8) ..cubicTo(11.691, 8, 11.875, 8.035, 12.052, 8.105) ..cubicTo(12.245, 8.182, 12.414, 8.293, 12.561, 8.439) ..cubicTo(12.707, 8.586, 12.818, 8.755, 12.895, 8.948) ..cubicTo(12.965, 9.125, 13, 9.309, 13, 9.5) ..lineTo(13, 11.5) ..cubicTo(13, 11.691, 12.965, 11.875, 12.895, 12.052) ..close() ..moveTo(10.146, 11.854) ..cubicTo(10.244, 11.951, 10.362, 12, 10.5, 12) ..lineTo(11.5, 12) ..cubicTo(11.638, 12, 11.756, 11.951, 11.854, 11.854) ..cubicTo(11.951, 11.756, 12, 11.638, 12, 11.5) ..lineTo(12, 9.5) ..cubicTo(12, 9.362, 11.951, 9.244, 11.854, 9.146) ..cubicTo(11.756, 9.049, 11.638, 9, 11.5, 9) ..lineTo(10.5, 9) ..cubicTo(10.362, 9, 10.244, 9.049, 10.146, 9.146) ..cubicTo(10.049, 9.244, 10, 9.362, 10, 9.5) ..lineTo(10, 11.5) ..cubicTo(10, 11.638, 10.049, 11.756, 10.146, 11.854) ..close(); canvas.drawPath(p, Paint()..color = color); } @override bool shouldRepaint(_BinaryIconPainter old) => old.color != color; } ```