Codium Icon
The Codium Icon icon represents a customizable and extensible code editor.
Exports at 36 × 24 px
Code
Codium Icon in your framework
In any framework. Customize it above, and the code follows.
export const CodiumIconIcon = (props: React.SVGProps<SVGSVGElement>) => (
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="24" viewBox="0 0 256 170" {...props}>
<defs><radialGradient id="SVGIHVS8bHv" cx="0" cy="0" r="1" gradientTransform="matrix(-93.94978 -1.31187 1.91351 -137.03592 119.07 85.05)" gradientUnits="userSpaceOnUse"><stop stopColor="#6447FF"/><stop offset=".067" stopColor="#6348FE"/><stop offset=".133" stopColor="#614DFC"/><stop offset=".2" stopColor="#5C54F8"/><stop offset=".267" stopColor="#565EF3"/><stop offset=".333" stopColor="#4E6CEC"/><stop offset=".4" stopColor="#447BE4"/><stop offset=".467" stopColor="#3A8DDB"/><stop offset=".533" stopColor="#2F9FD1"/><stop offset=".6" stopColor="#25B1C8"/><stop offset=".667" stopColor="#1BC0C0"/><stop offset=".733" stopColor="#13CEB9"/><stop offset=".8" stopColor="#0DD8B4"/><stop offset=".867" stopColor="#08DFB0"/><stop offset=".933" stopColor="#06E4AE"/><stop offset="1" stopColor="#05E5AD"/></radialGradient><radialGradient id="SVGGm0YJbVK" cx="0" cy="0" r="1" gradientTransform="matrix(-50.24352 -14.35492 14.75776 -51.65347 180.635 22.73)" gradientUnits="userSpaceOnUse"><stop stopColor="#6447FF"/><stop offset=".067" stopColor="#6348FE"/><stop offset=".133" stopColor="#614DFC"/><stop offset=".2" stopColor="#5C54F8"/><stop offset=".267" stopColor="#565EF3"/><stop offset=".333" stopColor="#4E6CEC"/><stop offset=".4" stopColor="#447BE4"/><stop offset=".467" stopColor="#3A8DDB"/><stop offset=".533" stopColor="#2F9FD1"/><stop offset=".6" stopColor="#25B1C8"/><stop offset=".667" stopColor="#1BC0C0"/><stop offset=".733" stopColor="#13CEB9"/><stop offset=".8" stopColor="#0DD8B4"/><stop offset=".867" stopColor="#08DFB0"/><stop offset=".933" stopColor="#06E4AE"/><stop offset="1" stopColor="#05E5AD"/></radialGradient><radialGradient id="SVGCek9dbuA" cx="0" cy="0" r="1" gradientTransform="matrix(-50.24352 -14.35492 14.75776 -51.65347 180.635 159.67)" gradientUnits="userSpaceOnUse"><stop stopColor="#6447FF"/><stop offset=".067" stopColor="#6348FE"/><stop offset=".133" stopColor="#614DFC"/><stop offset=".2" stopColor="#5C54F8"/><stop offset=".267" stopColor="#565EF3"/><stop offset=".333" stopColor="#4E6CEC"/><stop offset=".4" stopColor="#447BE4"/><stop offset=".467" stopColor="#3A8DDB"/><stop offset=".533" stopColor="#2F9FD1"/><stop offset=".6" stopColor="#25B1C8"/><stop offset=".667" stopColor="#1BC0C0"/><stop offset=".733" stopColor="#13CEB9"/><stop offset=".8" stopColor="#0DD8B4"/><stop offset=".867" stopColor="#08DFB0"/><stop offset=".933" stopColor="#06E4AE"/><stop offset="1" stopColor="#05E5AD"/></radialGradient><radialGradient id="SVG892IWboz" cx="0" cy="0" r="1" gradientTransform="matrix(-45.96601 -20.03622 29.70752 -68.1534 226.095 157.52)" gradientUnits="userSpaceOnUse"><stop stopColor="#6447FF"/><stop offset=".067" stopColor="#6348FE"/><stop offset=".133" stopColor="#614DFC"/><stop offset=".2" stopColor="#5C54F8"/><stop offset=".267" stopColor="#565EF3"/><stop offset=".333" stopColor="#4E6CEC"/><stop offset=".4" stopColor="#447BE4"/><stop offset=".467" stopColor="#3A8DDB"/><stop offset=".533" stopColor="#2F9FD1"/><stop offset=".6" stopColor="#25B1C8"/><stop offset=".667" stopColor="#1BC0C0"/><stop offset=".733" stopColor="#13CEB9"/><stop offset=".8" stopColor="#0DD8B4"/><stop offset=".867" stopColor="#08DFB0"/><stop offset=".933" stopColor="#06E4AE"/><stop offset="1" stopColor="#05E5AD"/></radialGradient><radialGradient id="SVGMWlVyz2K" cx="0" cy="0" r="1" gradientTransform="matrix(-45.96601 -20.03622 29.70752 -68.1534 226.095 31.103)" gradientUnits="userSpaceOnUse"><stop stopColor="#6447FF"/><stop offset=".067" stopColor="#6348FE"/><stop offset=".133" stopColor="#614DFC"/><stop offset=".2" stopColor="#5C54F8"/><stop offset=".267" stopColor="#565EF3"/><stop offset=".333" stopColor="#4E6CEC"/><stop offset=".4" stopColor="#447BE4"/><stop offset=".467" stopColor="#3A8DDB"/><stop offset=".533" stopColor="#2F9FD1"/><stop offset=".6" stopColor="#25B1C8"/><stop offset=".667" stopColor="#1BC0C0"/><stop offset=".733" stopColor="#13CEB9"/><stop offset=".8" stopColor="#0DD8B4"/><stop offset=".867" stopColor="#08DFB0"/><stop offset=".933" stopColor="#06E4AE"/><stop offset="1" stopColor="#05E5AD"/></radialGradient><radialGradient id="SVGXFLJHcUs" cx="0" cy="0" r="1" gradientTransform="matrix(29.90682 0 0 147.52703 229.683 83.74)" gradientUnits="userSpaceOnUse"><stop stopColor="#05E5AD"/><stop offset=".32" stopColor="#05E5AD" stopOpacity="0"/><stop offset=".903" stopColor="#6447FF"/></radialGradient></defs><path fill="url(#SVGIHVS8bHv)" 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(#SVGGm0YJbVK)" 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(#SVGCek9dbuA)" 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="#7962FE" 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(#SVG892IWboz)" 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(#SVGMWlVyz2K)" 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="#7962FE" 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="#321BB2" 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="#05E6AD" 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(#SVGXFLJHcUs)" 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="#7962FE" 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="#321BB2" 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>
);SVG Logos
More like it
Icons that share its tags, in the same style.
Search SVG Logos
Skip the copy and paste. With Pro, your AI agent finds and installs any SVG Logos icon from a prompt.
Get ProTags
Browse by tag
Codium Icon is tagged development, software, tool and 2 more. Related tags follow; each opens its icons from every library.
Pricing
SVG Logos MCP, with Pro
Ask for Codium Icon or any of 2,063 SVG Logos icons and your agent installs it. The MCP comes with every Pro plan, with 6,000+ blocks and 14 premium templates. The icons stay free.
4.9/5 out of 5 · 150+ reviewsfrom 150+ founders and developers.
- Secure checkout via Stripe
- Code lives in your repo
- Keep what you've shipped if you cancel
- License terms
FAQ
Frequently asked questions
What the Codium Icon icon means and where it's used, then how to install, style, label and license it.
The Codium Icon icon represents a customizable and extensible code editor. Codium Icon is designed to provide a comprehensive development environment for developers. It offers various features like syntax highlighting, code completion, and debugging tools.
Codium Icon is used by developers, programmers, and software engineers for writing and editing code. It integrates with popular development tools and platforms like GitHub, GitLab, and Bitbucket.
From a UX perspective, the Codium Icon icon communicates a sense of coding and development, conveying a tool that supports programming activities. It helps users understand that the platform offers advanced code editing features.
Codium Icon is one of 2,063 icons in SVG Logos, made by Gil Barbara and released under CC0. It is drawn on a 256 × 170 grid.
Sign in (it's free), then open Get icon, Install with shadcn CLI, and pick your package manager to copy the command. It adds CodiumIconIcon to components/icons/logos-codium-icon.tsx: one file, a size prop (24 by default) and every SVG prop, with no icon package.
Copy it as React (from Get icon, or the Code section): a typed CodiumIconIcon component you paste into your project, with no package to install. Only the icons you import reach your bundle. It works in Next.js and any React app.
Open Get icon, then Copy as code, and pick Vue, Svelte, Angular, Solid or Preact; the Code section shows each one too. Every version is one self-contained component with the SVG inside, and SVG and data URL copies are there for plain HTML and CSS.
With Pro, the shadcn.io MCP server lets Claude Code, Cursor or any MCP client find the Codium Icon icon, or any of 2,063 SVG Logos icons, and install it from a prompt.
It's multicolor, so it keeps its own colors.
Set width and height on the component, or a class like size-6. It's drawn on a 256 × 170 grid, so it stays sharp at any size. Customize also sets the size it exports at, its padding and rotation.
Yes. It keeps its own colors in light and dark mode, so check it against both backgrounds. The icon is a vector, so it needs no separate dark asset.
Next to a visible label it's decoration: add aria-hidden="true" so screen readers skip it. Standing alone, as in an icon button, give the button a name instead, like aria-label="Codium Icon", so screen readers say what it does.
Yes. CodiumIconIcon passes every SVG prop to the svg element, so <CodiumIconIcon aria-hidden="true" /> works, and so do role="img" with aria-label, or a title child, when it carries meaning on its own.
Yes. Open Get icon, then Download file: SVG for code or design tools like Figma; PNG, WebP or JPEG at 512px; or an ICO favicon with 16, 32 and 48px inside. Each one uses what you set in Customize.
CC0 puts the icons in the public domain: use them anywhere, with no conditions. The full terms are in the license, linked on this page.
No. CC0 gives the icons to the public domain, so no credit and no notice is required. Icons installed with the shadcn CLI still start with a comment naming SVG Logos, Gil Barbara and the license.
Yes. Copying and downloading it is free, and the shadcn CLI install only needs a free account.
Its tags are development, software, tool, coding and editor. Each tag page lists the icons that carry it from every library, which is the quickest way to find a match for Codium Icon in another set.
4.9 out of 5 from 150+ developers
Install Codium Icon from a prompt
MCP, 6,000+ blocks and 14 premium templates in every Pro plan. The icons stay free.
Get Pro