Border Top Bottom Double icon

Used in styling content scenarios. Contains option variants. The Border Top Bottom Double icon is part of Microsoft's Fluent UI System Icons, available here in regular and filled styles in 2 sizes from 20 to 24 px. Download it as SVG or PNG, or copy it as code — it's free to use under the MIT License.

Regular (outlined)

Filled

Xceed Toolkit Plus for WPFSponsorUpgrade Your WPF UI with Xceed Toolkit Plus

Every size and style

Microsoft draws each size separately so icons stay crisp, rather than scaling one drawing. Pick a style and size to preview it, download it, or copy the code for your platform.

Regular, 24 px

ic_fluent_border_top_bottom_double_24_regular.svg

npm install @fluentui/react-icons

import { BorderTopBottomDouble24Regular } from "@fluentui/react-icons";

export function Example() {
  return <BorderTopBottomDouble24Regular aria-label="Border Top Bottom Double" />;
}

Use the Border Top Bottom Double 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 { BorderTopBottomDouble24Regular, BorderTopBottomDouble24Filled } from "@fluentui/react-icons";

export function Example() {
  return <BorderTopBottomDouble24Regular aria-label="Border Top Bottom Double" />;
}

Coding agents can look up this component through the Fluent Icons MCP server.

Use it in HTML

Reference the SVG file directly:

<img src="https://fluenticons.co/icons/ic_fluent_border_top_bottom_double_24_regular.svg" width="24" height="24" alt="Border Top Bottom Double">

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="M3 6.25C3 6.66421 3.33579 7 3.75 7C4.16421 7 4.5 6.66421 4.5 6.25V5.75C4.5 5.05964 5.05964 4.5 5.75 4.5H18.25C18.9404 4.5 19.5 5.05964 19.5 5.75V6.25C19.5 6.66421 19.8358 7 20.25 7C20.6642 7 21 6.66421 21 6.25V5.75C21 4.23122 19.7688 3 18.25 3H5.75C4.23122 3 3 4.23122 3 5.75V6.25ZM3.75 10C4.16421 10 4.5 10.3358 4.5 10.75V13.25C4.5 13.6642 4.16421 14 3.75 14C3.33579 14 3 13.6642 3 13.25V10.75C3 10.3358 3.33579 10 3.75 10ZM20.25 10C19.8358 10 19.5 10.3358 19.5 10.75V13.25C19.5 13.6642 19.8358 14 20.25 14C20.6642 14 21 13.6642 21 13.25V10.75C21 10.3358 20.6642 10 20.25 10ZM3 20.25C3 20.6642 3.33579 21 3.75 21H20.25C20.6642 21 21 20.6642 21 20.25C21 19.8358 20.6642 19.5 20.25 19.5H3.75C3.33579 19.5 3 19.8358 3 20.25ZM3.75 18.5C3.33579 18.5 3 18.1642 3 17.75C3 17.3358 3.33579 17 3.75 17H20.25C20.6642 17 21 17.3358 21 17.75C21 18.1642 20.6642 18.5 20.25 18.5H3.75Z" fill="currentColor"/></svg>

Details

Name	Border Top Bottom Double
Styles	Regular (outlined), Filled
Sizes	20 px, 24 px
Regular (outlined) file	`ic_fluent_border_top_bottom_double_24_regular.svg`
Filled file	`ic_fluent_border_top_bottom_double_24_filled.svg`
React (Regular)	`BorderTopBottomDouble20Regular, BorderTopBottomDouble24Regular`
React (Filled)	`BorderTopBottomDouble20Filled, BorderTopBottomDouble24Filled`
License	MIT (© Microsoft Corporation)

Keywords

edit style

Border Top Bottom Double icon

Every size and style