scroll icon

scroll from Line Awesome by Icons8 · Line · Tabletop Gaming · Apache-2.0 Free for personal and commercial use.

Name: scroll
Set: Line Awesome
Style: Line
Category: Tabletop Gaming
Viewbox: 32×32
License: Apache 2.0
Aliases: scroll-solid

The same icon in other sets

scrollEmoji One (Colored)scrollFont Awesome 6 Solid scrollFluent Emoji scrollFluent Emoji Flat scrollFluent Emoji High Contrast scrollHuge Icons scrollLucide scrollMajesticons scrollNoto Emoji scrollOpenMoji scrollPhosphor scrollStreamline Emojis scrollTwitter Emoji scrollUnicons

More tabletop gaming icons from Line Awesome

acquisitions-incorporated book-dead critical-role d-and-d d-and-d-beyond dice-d20 dice-d6 dragon dungeon fantasy-flight-games fist-raised hat-wizard penny-arcade ring skull-crossbones wizards-of-the-coast

Use the scroll icon

SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M10 4C8.355 4 7 5.355 7 7v14H4v4c0 1.645 1.355 3 3 3h14.031A3.017 3.017 0 0 0 24 25V11h4V7c0-1.645-1.355-3-3-3zm0 2h12.188A3 3 0 0 0 22 7v18c0 .566-.434 1-1 1c-.563.008-.992-.438-1-1l-.031-4H9V7c0-.566.434-1 1-1m15 0c.566 0 1 .434 1 1v2h-2V7c0-.566.434-1 1-1M6 23h12v2.031c.004.344.075.66.188.969H7c-.566 0-1-.434-1-1z"/></svg>

React

import type { SVGProps } from "react";

export function LaScroll(props: SVGProps<SVGSVGElement>) {
  return (
    <svg {...props} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M10 4C8.355 4 7 5.355 7 7v14H4v4c0 1.645 1.355 3 3 3h14.031A3.017 3.017 0 0 0 24 25V11h4V7c0-1.645-1.355-3-3-3zm0 2h12.188A3 3 0 0 0 22 7v18c0 .566-.434 1-1 1c-.563.008-.992-.438-1-1l-.031-4H9V7c0-.566.434-1 1-1m15 0c.566 0 1 .434 1 1v2h-2V7c0-.566.434-1 1-1M6 23h12v2.031c.004.344.075.66.188.969H7c-.566 0-1-.434-1-1z"/></svg>
  );
}

Vue

<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M10 4C8.355 4 7 5.355 7 7v14H4v4c0 1.645 1.355 3 3 3h14.031A3.017 3.017 0 0 0 24 25V11h4V7c0-1.645-1.355-3-3-3zm0 2h12.188A3 3 0 0 0 22 7v18c0 .566-.434 1-1 1c-.563.008-.992-.438-1-1l-.031-4H9V7c0-.566.434-1 1-1m15 0c.566 0 1 .434 1 1v2h-2V7c0-.566.434-1 1-1M6 23h12v2.031c.004.344.075.66.188.969H7c-.566 0-1-.434-1-1z"/></svg>
</template>

CSS

.icon-scroll {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10%204C8.355%204%207%205.355%207%207v14H4v4c0%201.645%201.355%203%203%203h14.031A3.017%203.017%200%200%200%2024%2025V11h4V7c0-1.645-1.355-3-3-3zm0%202h12.188A3%203%200%200%200%2022%207v18c0%20.566-.434%201-1%201c-.563.008-.992-.438-1-1l-.031-4H9V7c0-.566.434-1%201-1m15%200c.566%200%201%20.434%201%201v2h-2V7c0-.566.434-1%201-1M6%2023h12v2.031c.004.344.075.66.188.969H7c-.566%200-1-.434-1-1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221em%22%20height%3D%221em%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M10%204C8.355%204%207%205.355%207%207v14H4v4c0%201.645%201.355%203%203%203h14.031A3.017%203.017%200%200%200%2024%2025V11h4V7c0-1.645-1.355-3-3-3zm0%202h12.188A3%203%200%200%200%2022%207v18c0%20.566-.434%201-1%201c-.563.008-.992-.438-1-1l-.031-4H9V7c0-.566.434-1%201-1m15%200c.566%200%201%20.434%201%201v2h-2V7c0-.566.434-1%201-1M6%2023h12v2.031c.004.344.075.66.188.969H7c-.566%200-1-.434-1-1z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

Direct links: SVG · download · JSON · https://iconsdb.app/api/v1/icon/la/scroll.svg?color=%231a73e8&size=48