Home/Libraries/Glyphs (Iconify)/border-center-outline

Glyphs (Iconify)

BorderCenterOutline

License: MITCommercial 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 80 80"><g fill="none"><path fill="#818cf8" fill-opacity=".25" fill-rule="evenodd" d="M14 16a2 2 0 0 1 2-2h.005a2 2 0 0 1 1.412 3.417A2 2 0 0 1 14 16.005zm7.995 0a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2m8 0a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2m16 0a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2m8 0a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2m8 0a2 2 0 0 1 2-2H64a2 2 0 0 1 2 2v.005a2 2 0 0 1-3.417 1.412A2 2 0 0 1 61.995 16M16 21.995a2 2 0 0 1 2 2v.01a2 2 0 1 1-4 0v-.01a2 2 0 0 1 2-2m48 0a2 2 0 0 1 2 2v.01a2 2 0 1 1-4 0v-.01a2 2 0 0 1 2-2m0 8a2 2 0 0 1 2 2v.01a2 2 0 1 1-4 0v-.01a2 2 0 0 1 2-2m-48 0a2 2 0 0 1 2 2v.01a2 2 0 1 1-4 0v-.01a2 2 0 0 1 2-2M14 40v.005a2 2 0 0 0 3.417 1.412c.363-.362.588-.863.588-1.417s-.225-1.055-.588-1.417A2 2 0 0 0 14 39.995m52 0a2 2 0 0 0-2-2zm-2-2c-.554 0-1.055.225-1.417.588zm-1.417.588A2 2 0 0 0 61.995 40c0 .554.225 1.055.588 1.417s.864.588 1.417.588a2 2 0 0 0 2-2M21.995 40a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2m8 0a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2m16 0a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2m8 0a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2M16 45.995a2 2 0 0 1 2 2v.01a2 2 0 1 1-4 0v-.01a2 2 0 0 1 2-2m48 0a2 2 0 0 1 2 2v.01a2 2 0 1 1-4 0v-.01a2 2 0 0 1 2-2m-48 8a2 2 0 0 1 2 2v.01a2 2 0 1 1-4 0v-.01a2 2 0 0 1 2-2m48 0a2 2 0 0 1 2 2v.01a2 2 0 1 1-4 0v-.01a2 2 0 0 1 2-2m-46.583 8.588A2 2 0 0 0 14 63.995V64a2 2 0 0 0 2 2h.005a2 2 0 0 0 1.412-3.417M64 61.995a2 2 0 0 1 2 2V64a2 2 0 0 1-2 2h-.005a2 2 0 0 1-1.412-3.417A2 2 0 0 1 64 61.995M23.995 66a2 2 0 1 1 0-4h.01a2 2 0 1 1 0 4zm8 0a2 2 0 1 1 0-4h.01a2 2 0 1 1 0 4zm14-2a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2m8 0a2 2 0 0 1 2-2h.01a2 2 0 1 1 0 4h-.01a2 2 0 0 1-2-2" clip-rule="evenodd"/><path stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" d="M64 37.995a2 2 0 0 1 2 2zm0 0c-.554 0-1.055.225-1.417.588M64 37.995l-1.417.588m0 0A2 2 0 0 0 61.995 40c0 .554.225 1.055.588 1.417s.864.588 1.417.588a2 2 0 0 0 2-2zM16 14a2 2 0 0 0-2 2v.005a2 2 0 0 0 3.416 1.412A2 2 0 0 0 16.005 14zm7.995 0a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4zm8 0a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4zm16 0a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4zm8 0a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4zm8 0a2 2 0 0 0-1.412 3.417A2 2 0 0 0 66 16.005V16a2 2 0 0 0-2-2zM18 23.995a2 2 0 1 0-4 0v.01a2 2 0 1 0 4 0zm48 0a2 2 0 1 0-4 0v.01a2 2 0 1 0 4 0zm0 8a2 2 0 1 0-4 0v.01a2 2 0 1 0 4 0zm-48 0a2 2 0 1 0-4 0v.01a2 2 0 1 0 4 0zM14 40v.005a2 2 0 0 0 3.417 1.412c.363-.362.588-.863.588-1.417s-.225-1.055-.588-1.417A2 2 0 0 0 14 39.995zm9.995-2a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4zm8 0a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4zm16 0a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4zm8 0a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4zM18 47.995a2 2 0 1 0-4 0v.01a2 2 0 1 0 4 0zm48 0a2 2 0 1 0-4 0v.01a2 2 0 1 0 4 0zm-48 8a2 2 0 1 0-4 0v.01a2 2 0 1 0 4 0zm48 0a2 2 0 1 0-4 0v.01a2 2 0 1 0 4 0zm-48.583 6.588A2 2 0 0 0 14 63.995V64a2 2 0 0 0 2 2h.005a2 2 0 0 0 1.412-3.417M66 63.995a2 2 0 0 0-3.417-1.412A2 2 0 0 0 63.995 66H64a2 2 0 0 0 2-2zM21.995 64a2 2 0 0 0 2 2h.01a2 2 0 1 0 0-4h-.01a2 2 0 0 0-2 2m8 0a2 2 0 0 0 2 2h.01a2 2 0 1 0 0-4h-.01a2 2 0 0 0-2 2m18-2a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4zm8 0a2 2 0 1 0 0 4h.01a2 2 0 1 0 0-4z"/><path fill="#818cf8" fill-opacity=".25" fill-rule="evenodd" stroke="#818cf8" stroke-linecap="round" stroke-linejoin="round" d="M40 14a2 2 0 0 1 2 2v48a2 2 0 1 1-4 0V16a2 2 0 0 1 2-2" clip-rule="evenodd"/></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. BorderCenterOutlineIcon.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.

Related Icons in Glyphs (Iconify)

Browse all Glyphs (Iconify) icons →