Home/Libraries/Fluent Emoji (Iconify)/optical-disk

Fluent Emoji (Iconify)

OpticalDisk

License: MITCommercial Safe

ICON SIZE

STROKE WEIGHT1.5px

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 32 32"><g fill="none"><g filter="url(#iRdDNnb)"><path fill="url(#i7Uzlsm)" fill-rule="evenodd" d="M16.188 30.017c7.741 0 14.017-6.276 14.017-14.017S23.929 1.983 16.188 1.983S2.172 8.26 2.172 16s6.275 14.017 14.016 14.017m0-10.705a3.312 3.312 0 1 0 0-6.624a3.312 3.312 0 0 0 0 6.624" clip-rule="evenodd"/></g><g filter="url(#iz0fbDR)"><path fill="url(#i6QFdXb)" fill-rule="evenodd" d="M16.188 29.116c7.244 0 13.116-5.872 13.116-13.116S23.432 2.884 16.188 2.884S3.072 8.756 3.072 16s5.872 13.116 13.116 13.116M19.96 16c0 1.83-1.943 3.903-3.772 3.903S12.191 17.829 12.191 16s2.168-4.015 3.997-4.015c1.83 0 3.772 2.186 3.772 4.015" clip-rule="evenodd"/></g><g filter="url(#iFMYS0D)"><path fill="url(#iRzwTgd)" d="M12.894 13.175a4.33 4.33 0 0 1 3.294-1.514c1.213 0 2.309.497 3.096 1.299l5.783-5.783a.58.58 0 0 0-.008-.838a13.07 13.07 0 0 0-8.87-3.455a13.08 13.08 0 0 0-9.507 4.08z"/></g><g filter="url(#iCgIhGd)"><path fill="url(#iGCzhlD)" d="M19.013 19.294a4.32 4.32 0 0 1-2.825 1.045a4.33 4.33 0 0 1-3.04-1.243l-5.78 5.78a.58.58 0 0 0 .01.841a13.07 13.07 0 0 0 8.81 3.399a13.06 13.06 0 0 0 9.037-3.61z"/></g><g filter="url(#iMQ1zgd)"><path stroke="#818cf8" stroke-width="1.5" d="M16.188 20.364a4.364 4.364 0 1 0 0-8.728a4.364 4.364 0 0 0 0 8.728Z"/></g><g filter="url(#iz00GBc)"><path fill="url(#i2nwDhd)" d="m26.47 7.856l-7.252 6.025c.456.663.742 1.417.742 2.119c0 .896-.466 1.85-1.156 2.59c2.385 2.188 5.34 4.89 6.97 6.362A13.07 13.07 0 0 0 29.304 16a13.06 13.06 0 0 0-2.834-8.144"/><path fill="url(#izgSXsd)" d="m26.47 7.856l-7.252 6.025c.456.663.742 1.417.742 2.119c0 .896-.466 1.85-1.156 2.59c2.385 2.188 5.34 4.89 6.97 6.362A13.07 13.07 0 0 0 29.304 16a13.06 13.06 0 0 0-2.834-8.144"/><path fill="url(#iIUdMcb)" d="m26.47 7.856l-7.252 6.025c.456.663.742 1.417.742 2.119c0 .896-.466 1.85-1.156 2.59c2.385 2.188 5.34 4.89 6.97 6.362A13.07 13.07 0 0 0 29.304 16a13.06 13.06 0 0 0-2.834-8.144"/></g><g filter="url(#iiHiWNT)"><path fill="url(#i2oj33d)" d="m5.907 7.856l7.251 6.025c-.456.663-.741 1.417-.741 2.119c0 .896.465 1.85 1.155 2.59c-2.385 2.188-5.34 4.89-6.97 6.362A13.07 13.07 0 0 1 3.072 16a13.06 13.06 0 0 1 2.835-8.144"/><path fill="url(#idsUdEb)" d="m5.907 7.856l7.251 6.025c-.456.663-.741 1.417-.741 2.119c0 .896.465 1.85 1.155 2.59c-2.385 2.188-5.34 4.89-6.97 6.362A13.07 13.07 0 0 1 3.072 16a13.06 13.06 0 0 1 2.835-8.144"/><path fill="url(#iRO403d)" d="m5.907 7.856l7.251 6.025c-.456.663-.741 1.417-.741 2.119c0 .896.465 1.85 1.155 2.59c-2.385 2.188-5.34 4.89-6.97 6.362A13.07 13.07 0 0 1 3.072 16a13.06 13.06 0 0 1 2.835-8.144"/></g><g filter="url(#iLEmpOe)"><path fill="url(#iSQcS7e)" fill-rule="evenodd" d="M16.188 20.34a4.34 4.34 0 1 0 0-8.68a4.34 4.34 0 0 0 0 8.68M19.5 16a3.312 3.312 0 1 1-6.624 0a3.312 3.312 0 0 1 6.624 0" clip-rule="evenodd"/></g><defs><linearGradient id="i7Uzlsm" x1="16.188" x2="16.188" y1="1.983" y2="30.017" gradientUnits="userSpaceOnUse"><stop stop-color="#D0C9D8"/><stop offset="1" stop-color="#B09AC4"/></linearGradient><linearGradient id="i6QFdXb" x1="16.188" x2="16.188" y1="8.419" y2="29.116" gradientUnits="userSpaceOnUse"><stop stop-color="#D1C7DB"/><stop offset="1" stop-color="#BFACD0"/></linearGradient><linearGradient id="iRzwTgd" x1="25.242" x2="11.781" y1="6.918" y2="6.918" gradientUnits="userSpaceOnUse"><stop stop-color="#FDEBFF"/><stop offset="1" stop-color="#FDEBFF" stop-opacity="0"/></linearGradient><linearGradient id="iGCzhlD" x1="11.366" x2="19.229" y1="19.941" y2="19.941" gradientUnits="userSpaceOnUse"><stop stop-color="#EBD8FE"/><stop offset="1" stop-color="#EBD8FE" stop-opacity="0"/></linearGradient><linearGradient id="i2nwDhd" x1="24.054" x2="24.054" y1="9.75" y2="22.438" gradientUnits="userSpaceOnUse"><stop stop-color="#E8C0DD"/><stop offset=".296" stop-color="#EED0DE"/><stop offset=".656" stop-color="#D0CFDE"/><stop offset="1" stop-color="#CDB9F2"/></linearGradient><linearGradient id="izgSXsd" x1="22.188" x2="23.5" y1="10.938" y2="12.75" gradientUnits="userSpaceOnUse"><stop offset=".234" stop-color="#D2C8DC"/><stop offset="1" stop-color="#D2C8DC" stop-opacity="0"/></linearGradient><linearGradient id="iIUdMcb" x1="21.719" x2="22.906" y1="21.25" y2="19.813" gradientUnits="userSpaceOnUse"><stop stop-color="#C6B6D5"/><stop offset="1" stop-color="#C6B6D5" stop-opacity="0"/></linearGradient><linearGradient id="i2oj33d" x1="9.75" x2="9.75" y1="22.125" y2="10.813" gradientUnits="userSpaceOnUse"><stop stop-color="#E8C0DD"/><stop offset=".296" stop-color="#EED0DE"/><stop offset=".656" stop-color="#D0CFDE"/><stop offset="1" stop-color="#CDB9F2"/></linearGradient><linearGradient id="idsUdEb" x1="10.189" x2="8.322" y1="10.938" y2="13.375" gradientUnits="userSpaceOnUse"><stop offset=".234" stop-color="#D2C8DC"/><stop offset="1" stop-color="#D2C8DC" stop-opacity="0"/></linearGradient><linearGradient id="iRO403d" x1="10.938" x2="9.5" y1="21.25" y2="18.938" gradientUnits="userSpaceOnUse"><stop stop-color="#C6B6D5"/><stop offset="1" stop-color="#C6B6D5" stop-opacity="0"/></linearGradient><filter id="iRdDNnb" width="28.533" height="28.533" x="1.922" y="1.733" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dy="-.25"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.623529 0 0 0 0 0.454902 0 0 0 0 0.764706 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_19843"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".25"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.74902 0 0 0 0 0.737255 0 0 0 0 0.764706 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_19843" result="effect2_innerShadow_18_19843"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.25" dy=".25"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.905882 0 0 0 0 0.882353 0 0 0 0 0.92549 0 0 0 1 0"/><feBlend in2="effect2_innerShadow_18_19843" result="effect3_innerShadow_18_19843"/></filter><filter id="iz0fbDR" width="26.732" height="26.732" x="2.822" y="2.634" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_19843" stdDeviation=".125"/></filter><filter id="iFMYS0D" width="19.06" height="10.791" x="6.432" y="2.634" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_19843" stdDeviation=".125"/></filter><filter id="iCgIhGd" width="18.532" height="10.52" x="6.943" y="18.846" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_19843" stdDeviation=".125"/></filter><filter id="iMQ1zgd" width="8.978" height="8.978" x="11.699" y="11.511" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_19843" stdDeviation=".05"/></filter><filter id="iz00GBc" width="11.5" height="18.096" x="18.304" y="7.356" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_19843" stdDeviation=".25"/></filter><filter id="iiHiWNT" width="11.5" height="18.096" x="2.572" y="7.356" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_19843" stdDeviation=".25"/></filter><filter id="iLEmpOe" width="8.928" height="8.678" x="11.599" y="11.661" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx="-.25"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.741176 0 0 0 0 0.678431 0 0 0 0 0.811765 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_19843"/></filter><radialGradient id="iSQcS7e" cx="0" cy="0" r="1" gradientTransform="translate(12.754 16)scale(9.23183)" gradientUnits="userSpaceOnUse"><stop offset=".62" stop-color="#C9B9DB"/><stop offset=".9" stop-color="#C7B8D4"/></radialGradient></defs></g></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. OpticalDiskIcon.tsx) to avoid installing any npm packages.

Q.Is this icon free for commercial use?

Yes. This icon is published under the open-source **MIT** 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.