code bracket square icon

Common uses

• Button to view/edit code
• Link to API documentation
• Indicator for code blocks

Use it in React

npm i @heroicons/react

import { CodeBracketSquareIcon } from '@heroicons/react/24/outline';

<CodeBracketSquareIcon className="size-6" />

Styles

Heroicons ships this icon in 4 styles — each its own import:

<CodeBracketSquareIcon className="size-6" />

<CodeBracketSquareIcon className="size-6" />

<CodeBracketSquareIcon className="size-6" />

<CodeBracketSquareIcon className="size-6" />

Details

Library

Heroicons (324 icons)

License

MIT

viewBox

0 0 24 24

Keywords

codebracketsquarecurly bracescode symboldeveloper iconprogramming icon

FAQ

What is the code bracket square icon used for?

It represents code, programming, or development. Use it for actions like viewing or editing code, or linking to documentation.

How do I use this icon in React?

Import it from Heroicons like this: import { CodeBracketSquareIcon } from '@heroicons/react/24/outline'. Then use the component: <CodeBracketSquareIcon />.

What is the license for this icon?

The Heroicons library, including this icon, is available under the MIT license.

Related icons

The same idea in other libraries, and near matches in Heroicons.