Home/Libraries/Fluent UI System Icons (Iconify)/keyboard-123-24-filled

Fluent UI System Icons (Iconify)

Keyboard12324Filled

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 24 24"><path fill="#818cf8" d="M5.165 4.17a.75.75 0 0 0 .999-.32l.002-.004l.036-.052a1.2 1.2 0 0 1 .204-.208c.19-.152.526-.336 1.094-.336c.492 0 .78.237.892.46c.103.207.103.484-.172.76c-.195.194-.446.363-.766.548q-.133.077-.29.164c-.24.135-.512.287-.753.445c-.757.494-1.494 1.211-1.655 2.532A.75.75 0 0 0 5.5 9h3.75a.75.75 0 1 0 0-1.5H6.548c.17-.243.402-.434.683-.618c.199-.13.392-.237.607-.358q.172-.095.369-.208c.349-.203.738-.45 1.073-.786c.725-.724.85-1.697.453-2.49c-.388-.777-1.225-1.29-2.233-1.29c-.932 0-1.595.316-2.03.664a2.7 2.7 0 0 0-.587.654l-.034.06l-.012.02l-.004.01l-.002.003v.002l-.002.002a.75.75 0 0 0 .336 1.006m9.21.314c-.135.126-.4.266-.875.266a.75.75 0 0 0 0 1.5c.474 0 .74.14.875.266s.19.283.18.44c-.015.263-.282.794-1.305.794c-.465 0-.76-.137-.928-.249a1 1 0 0 1-.208-.182a.75.75 0 0 0-1.03-.193c-.584.375-.208 1.04-.208 1.04l.001.001l.001.002l.002.003l.005.008l.013.018l.036.048q.044.056.119.136c.1.106.243.238.437.367c.394.263.975.501 1.76.501c1.622 0 2.73-.969 2.803-2.206A2.04 2.04 0 0 0 15.48 5.5c.411-.427.606-.986.573-1.544c-.074-1.237-1.181-2.206-2.803-2.206c-.785 0-1.366.238-1.76.501a2.5 2.5 0 0 0-.556.503l-.036.048l-.013.018l-.005.008l-.002.003l-.001.002l-.001.001a.75.75 0 0 0 1.238.847l.029-.033c.033-.035.092-.09.18-.149c.168-.112.462-.249.927-.249c1.023 0 1.29.531 1.306.794a.55.55 0 0 1-.181.44m-2.251 2.85l-.007-.011v.002l.004.004l.001.002zm0-3.667l-.007.01v-.002l.004-.004l.001-.002zM3.495 2.649l.007.1v5.497a.75.75 0 0 1-1.494.102l-.006-.102V3.792l-.513.173a.75.75 0 0 1-.91-.378l-.04-.095a.75.75 0 0 1 .378-.91l.095-.04l1.501-.503a.75.75 0 0 1 .982.61m7.122 6.694c-.32.4-.814.657-1.367.657H5.5a1.75 1.75 0 0 1-1.4-.7a1.75 1.75 0 0 1-2.1.55v6.905a2.25 2.25 0 0 0 2.25 2.25h15.495a2.25 2.25 0 0 0 2.25-2.25V7.25A2.25 2.25 0 0 0 19.745 5h-2.832a3 3 0 0 1-.21.5c.263.495.381 1.05.348 1.604c-.112 1.895-1.79 3.146-3.8 3.146c-1 0-1.771-.306-2.315-.669a4 4 0 0 1-.319-.238M6.75 14.5h10.5l.102.007a.75.75 0 0 1 0 1.486L17.25 16H6.75l-.102-.007a.75.75 0 0 1 0-1.486zM15.5 12a1 1 0 1 1 2 0a1 1 0 0 1-2 0m-2.995 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0m-3 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0m-3 0a1 1 0 1 1 2 0a1 1 0 0 1-2 0m10.49-3a1 1 0 1 1 2 0a1 1 0 0 1-2 0"/></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. Keyboard12324FilledIcon.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.