Credit Card Toolbox icon

Use the Credit Card Toolbox icon in React

Install Microsoft's @fluentui/react-icons package, then import the component. Icons inherit the current text color, and you can size them with CSS.

npm install @fluentui/react-icons

import { CreditCardToolbox24Regular, CreditCardToolbox24Filled } from "@fluentui/react-icons";

export function Example() {
  return <CreditCardToolbox24Regular aria-label="Credit Card Toolbox" />;
}

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_credit_card_toolbox_24_regular.svg" width="24" height="24" alt="Credit Card Toolbox">

Or paste the SVG markup inline. Setting fill="currentColor" makes the icon follow the text color of its parent:

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.25 5C3.45507 5 2 6.45507 2 8.25V15.75C2 17.5449 3.45507 19 5.25 19H11V17.5H5.25C4.2835 17.5 3.5 16.7165 3.5 15.75V11H22V8.25C22 6.45507 20.5449 5 18.75 5H5.25ZM20.5 8.25V9.5H3.5V8.25C3.5 7.2835 4.2835 6.5 5.25 6.5H18.75C19.7165 6.5 20.5 7.2835 20.5 8.25ZM13.5 14.75H14V13.75C14 12.7835 14.7835 12 15.75 12H19.25C20.2165 12 21 12.7835 21 13.75V14.75H21.5C22.3284 14.75 23 15.4216 23 16.25V18H20V17.5C20 17.2239 19.7761 17 19.5 17C19.2239 17 19 17.2239 19 17.5V18H16V17.5C16 17.2239 15.7761 17 15.5 17C15.2239 17 15 17.2239 15 17.5V18H12V16.25C12 15.4216 12.6716 14.75 13.5 14.75ZM15.75 13.5C15.6119 13.5 15.5 13.6119 15.5 13.75V14.75H19.5V13.75C19.5 13.6119 19.3881 13.5 19.25 13.5H15.75ZM19 19.5V19H16V19.5C16 19.7761 15.7761 20 15.5 20C15.2239 20 15 19.7761 15 19.5V19H12V21.5C12 22.3284 12.6716 23 13.5 23H21.5C22.3284 23 23 22.3284 23 21.5V19H20V19.5C20 19.7761 19.7761 20 19.5 20C19.2239 20 19 19.7761 19 19.5Z" fill="currentColor"/></svg>

Use it from the SVG package

Microsoft's @fluentui/svg-icons package contains the raw SVG files, which works well with bundlers that import SVGs:

npm install @fluentui/svg-icons

import icon from "@fluentui/svg-icons/icons/credit_card_toolbox_24_regular.svg";

Details

Keywords

paymenttransactionpurchase.usedinscenariosinvolvingpayments.