Home/Libraries/SVG Logos (Iconify)/codium-icon

SVG Logos (Iconify)

CodiumIcon

License: CC0-1.0Commercial Safe

ICON SIZE

COLOR PICKER

Download SVG without fill color (CSS-styleable)

<svg style="color: #818cf8" xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 170"><defs><radialGradient id="SVG3jLyTd8N" cx="0" cy="0" r="1" gradientTransform="rotate(180.8 59.832 42.11)scale(93.95894 137.04928)" gradientUnits="userSpaceOnUse"><stop stop-color="#6447ff"/><stop offset=".067" stop-color="#6348fe"/><stop offset=".133" stop-color="#614dfc"/><stop offset=".2" stop-color="#5c54f8"/><stop offset=".267" stop-color="#565ef3"/><stop offset=".333" stop-color="#4e6cec"/><stop offset=".4" stop-color="#447be4"/><stop offset=".467" stop-color="#3a8ddb"/><stop offset=".533" stop-color="#2f9fd1"/><stop offset=".6" stop-color="#25b1c8"/><stop offset=".667" stop-color="#1bc0c0"/><stop offset=".733" stop-color="#13ceb9"/><stop offset=".8" stop-color="#0dd8b4"/><stop offset=".867" stop-color="#08dfb0"/><stop offset=".933" stop-color="#06e4ae"/><stop offset="1" stop-color="#05e5ad"/></radialGradient><radialGradient id="SVGN7znTdPE" cx="0" cy="0" r="1" gradientTransform="rotate(195.945 91.909 -1.284)scale(52.25395 53.72032)" gradientUnits="userSpaceOnUse"><stop stop-color="#6447ff"/><stop offset=".067" stop-color="#6348fe"/><stop offset=".133" stop-color="#614dfc"/><stop offset=".2" stop-color="#5c54f8"/><stop offset=".267" stop-color="#565ef3"/><stop offset=".333" stop-color="#4e6cec"/><stop offset=".4" stop-color="#447be4"/><stop offset=".467" stop-color="#3a8ddb"/><stop offset=".533" stop-color="#2f9fd1"/><stop offset=".6" stop-color="#25b1c8"/><stop offset=".667" stop-color="#1bc0c0"/><stop offset=".733" stop-color="#13ceb9"/><stop offset=".8" stop-color="#0dd8b4"/><stop offset=".867" stop-color="#08dfb0"/><stop offset=".933" stop-color="#06e4ae"/><stop offset="1" stop-color="#05e5ad"/></radialGradient><radialGradient id="SVG7nN61bhF" cx="0" cy="0" r="1" gradientTransform="rotate(195.945 101.498 67.186)scale(52.25395 53.72032)" gradientUnits="userSpaceOnUse"><stop stop-color="#6447ff"/><stop offset=".067" stop-color="#6348fe"/><stop offset=".133" stop-color="#614dfc"/><stop offset=".2" stop-color="#5c54f8"/><stop offset=".267" stop-color="#565ef3"/><stop offset=".333" stop-color="#4e6cec"/><stop offset=".4" stop-color="#447be4"/><stop offset=".467" stop-color="#3a8ddb"/><stop offset=".533" stop-color="#2f9fd1"/><stop offset=".6" stop-color="#25b1c8"/><stop offset=".667" stop-color="#1bc0c0"/><stop offset=".733" stop-color="#13ceb9"/><stop offset=".8" stop-color="#0dd8b4"/><stop offset=".867" stop-color="#08dfb0"/><stop offset=".933" stop-color="#06e4ae"/><stop offset="1" stop-color="#05e5ad"/></radialGradient><radialGradient id="SVG9ywN0dWE" cx="0" cy="0" r="1" gradientTransform="rotate(203.552 129.467 55.192)scale(50.14304 74.34663)" gradientUnits="userSpaceOnUse"><stop stop-color="#6447ff"/><stop offset=".067" stop-color="#6348fe"/><stop offset=".133" stop-color="#614dfc"/><stop offset=".2" stop-color="#5c54f8"/><stop offset=".267" stop-color="#565ef3"/><stop offset=".333" stop-color="#4e6cec"/><stop offset=".4" stop-color="#447be4"/><stop offset=".467" stop-color="#3a8ddb"/><stop offset=".533" stop-color="#2f9fd1"/><stop offset=".6" stop-color="#25b1c8"/><stop offset=".667" stop-color="#1bc0c0"/><stop offset=".733" stop-color="#13ceb9"/><stop offset=".8" stop-color="#0dd8b4"/><stop offset=".867" stop-color="#08dfb0"/><stop offset=".933" stop-color="#06e4ae"/><stop offset="1" stop-color="#05e5ad"/></radialGradient><radialGradient id="SVGBoHVMccf" cx="0" cy="0" r="1" gradientTransform="rotate(203.552 116.29 -8.016)scale(50.14304 74.34663)" gradientUnits="userSpaceOnUse"><stop stop-color="#6447ff"/><stop offset=".067" stop-color="#6348fe"/><stop offset=".133" stop-color="#614dfc"/><stop offset=".2" stop-color="#5c54f8"/><stop offset=".267" stop-color="#565ef3"/><stop offset=".333" stop-color="#4e6cec"/><stop offset=".4" stop-color="#447be4"/><stop offset=".467" stop-color="#3a8ddb"/><stop offset=".533" stop-color="#2f9fd1"/><stop offset=".6" stop-color="#25b1c8"/><stop offset=".667" stop-color="#1bc0c0"/><stop offset=".733" stop-color="#13ceb9"/><stop offset=".8" stop-color="#0dd8b4"/><stop offset=".867" stop-color="#08dfb0"/><stop offset=".933" stop-color="#06e4ae"/><stop offset="1" stop-color="#05e5ad"/></radialGradient><radialGradient id="SVGCOJglbGE" cx="0" cy="0" r="1" gradientTransform="matrix(29.90682 0 0 147.52703 229.683 83.74)" gradientUnits="userSpaceOnUse"><stop stop-color="#05e5ad"/><stop offset=".32" stop-color="#05e5ad" stop-opacity="0"/><stop offset=".903" stop-color="#6447ff"/></radialGradient></defs><path fill="url(#SVG3jLyTd8N)" d="M84.818 0c12.181 0 23.731 2.576 34.196 7.204c-23.187 13.153-39.367 42.949-39.367 77.614c0 34.659 16.196 64.46 39.367 77.613a84.4 84.4 0 0 1-34.196 7.204C37.977 169.635 0 131.658 0 84.818C0 37.98 37.977 0 84.818 0"/><path fill="url(#SVGN7znTdPE)" d="M151.704 32.693c-8.577-10.977-19.777-19.794-32.698-25.489C127.151 2.576 136.145 0 145.607 0c8.926 0 17.46 2.304 25.216 6.435c-7.582 5.646-14.161 14.77-19.132 26.258z"/><path fill="url(#SVG7nN61bhF)" d="M151.691 136.942c4.971 11.488 11.55 20.591 19.132 26.258c-7.772 4.145-16.29 6.435-25.216 6.435c-9.478 0-18.469-2.575-26.601-7.204c12.897-5.695 24.121-14.512 32.698-25.489z"/><path fill="#818cf8" d="M79.639 84.818c0-34.665 16.196-64.461 39.367-77.614c12.897 5.695 24.121 14.512 32.698 25.489c-6.244 14.389-9.959 32.47-9.959 52.125c0 19.646 3.729 37.735 9.959 52.119a85.1 85.1 0 0 1-32.698 25.494c-23.185-13.153-39.367-42.954-39.367-77.613"/><path fill="url(#SVG9ywN0dWE)" d="M203.084 126.414c2.399 12.788 5.872 23.514 10.06 31.083c-7.085 7.7-15.391 12.13-24.289 12.13c-6.383 0-12.467-2.29-18.023-6.435c13.688-7.283 25.034-20.326 32.252-36.756z"/><path fill="url(#SVGBoHVMccf)" d="M170.832 6.435C176.388 2.29 182.472 0 188.855 0c8.885 0 17.191 4.433 24.289 12.132c-4.175 7.566-7.648 18.287-10.06 31.075c-7.218-16.438-18.564-29.476-32.252-36.756z"/><path fill="#818cf8" d="M151.704 136.929c11.216-14.382 17.92-32.465 17.92-52.12c0-19.652-6.704-37.735-17.92-52.116c4.98-11.48 11.553-20.599 19.141-26.264c13.683 7.281 25.029 20.327 32.247 36.756c-2.32 12.29-3.633 26.49-3.633 41.611s1.33 29.312 3.633 41.605c-7.218 16.435-18.564 29.481-32.247 36.761c-7.588-5.651-14.161-14.767-19.141-26.263z"/><path fill="#818cf8" d="M151.696 136.942c-6.236-14.389-9.951-32.47-9.951-52.124c0-19.647 3.729-37.73 9.951-52.12c11.224 14.39 17.928 32.473 17.928 52.12c0 19.654-6.704 37.735-17.928 52.124"/><path fill="#818cf8" d="M213.144 12.132C217.4 4.433 222.38 0 227.724 0C243.343 0 256 37.98 256 84.818c0 46.84-12.657 84.817-28.276 84.817c-5.331 0-10.324-4.438-14.58-12.132c13.682-14.85 22.837-41.828 22.837-72.685c0-30.855-9.155-57.85-22.837-72.686"/><path fill="url(#SVGCOJglbGE)" d="M213.144 12.132C217.4 4.433 222.38 0 227.724 0C243.343 0 256 37.98 256 84.818c0 46.84-12.657 84.817-28.276 84.817c-5.331 0-10.324-4.438-14.58-12.132c13.682-14.85 22.837-41.828 22.837-72.685c0-30.855-9.155-57.85-22.837-72.686"/><path fill="#818cf8" d="M211.58 84.826c0-15.13-3.087-29.321-8.496-41.611c2.399-12.79 5.872-23.508 10.068-31.077c13.68 14.835 22.834 41.847 22.834 72.688c0 30.832-9.154 57.849-22.834 72.685c-4.183-7.574-7.648-18.295-10.068-31.083c5.396-12.29 8.496-26.481 8.496-41.602"/><path fill="#818cf8" d="M203.084 126.423c-2.317-12.293-3.634-26.484-3.634-41.605c0-15.127 1.33-29.321 3.634-41.611c5.396 12.29 8.496 26.484 8.496 41.611c0 15.121-3.087 29.312-8.496 41.605"/></svg>

Icons in Action

WEB APPLICATION HEADER & NAVIGATION

my-app.com/dashboard

Overview Dashboard

PROGRESS STEPPER

BUTTON UI ACTIONS

SCALABILITY & CLARITY

12px

16px

24px

32px

48px

“

Highly adaptable, clean vectors that scale perfectly across modern UI components, navigation bars, and mobile actions. Perfectly pre-vetted for production deployment.

IconSearch Presets

Frequently Asked Questions

Q.How do I use this icon in my React/Next.js project?

You have two choices: install the official package listed under the "REACT IMPORT" tab (e.g. npm install @iconify/react) and import the icon directly, or copy the complete React Component code from the "STANDALONE JSX" tab and paste it directly into a local file (e.g. CodiumIconIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **CC0-1.0** license. The license grants full permissions for personal and commercial usage (e.g., in SaaS platforms, client projects, or business landing pages). Attributing the icon creator is generally not required for MIT/ISC licenses, but check details on our dedicated License Guide.

Q.What is the "Download SVG without fill color" toggle?

Many SVGs ship with inline fill="..." attributes. By checking this toggle, we strip these attributes and enforce fill="none", making the SVG fully styleable via CSS classes or Tailwind utility classes like fill-current.