- 图标 ID
- simple-icons:roll20
- 中文名
- —
- 所属集合
- Simple Icons
- 集合规模
- 3,467 枚
- 基础网格
- 24px
- 色彩
- 单色（可改色）
- 开源协议
- CC0-1.0
- 作者
- Simple Icons Collaborators
下载 roll20 图标
SVG 矢量源文件，或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出，任意尺寸边缘锐利。
px
PNG 由矢量源实时渲染，任意尺寸边缘锐利无锯齿；下载与预览均免费，无需注册。
roll20 的预览与使用场景
切换预览颜色后，下方三底色、真实界面场景与各尺寸渲染会实时跟随。
预览颜色
浅色背景
深色背景灰底融入在真实界面里长这样
继续按钮内 · 主操作搜索roll20…输入框 · 前缀图标roll20导航菜单 · 选中态暂无内容空状态 · 引导提示9:41roll20手机桌面 · App 图标
roll20手机桌面 · App 图标roll20simple-icons.design/icons/roll20浏览器 · 标签页与站点图标各尺寸下的可读性
24px32px48px64px96px128px复制 roll20 图标代码
内联 SVG、React、Vue 与 CSS mask 四种主流引用方式，代码基于当前源文件生成，复制即用。
svgSVG 源码（内联 HTML）
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M11.383 0q-.03.002-.06.014h-.037L4.03 3.654a.25.25 0 0 0-.129.211c0 .136.11.239.239.239l-.008.013a.2.2 0 0 0 .096-.021l7.181-1.567a.245.245 0 0 0 .21-.236V.225A.24.24 0 0 0 11.382 0zm1.22.008c-.128 0-.23.1-.236.222V2.3c0 .122.094.217.21.23l-.007-.013l7.182 1.574a.236.236 0 0 0 .203-.428L12.7.02h-.008l-.027-.012h-.06zm.57 3.404a.24.24 0 0 0-.237.242q0 .073.04.123l6.749 11.868c.04.06.108.101.19.101c.128 0 .229-.1.235-.223l2.428-9.921c0-.014.008-.02.008-.034a.24.24 0 0 0-.203-.23l-9.121-1.9l.013-.006s-.027-.001-.04-.008zm-2.38.012l-.06.008c-.014 0-.028-.001-.042.006l-9.12 1.9a.24.24 0 0 0-.204.23c0 .014 0 .02.006.034h.014l2.427 9.921a.24.24 0 0 0 .239.23c.081 0 .148-.04.19-.1l6.747-11.87c.02-.04.041-.073.041-.12a.24.24 0 0 0-.238-.24zm1.193.306a.24.24 0 0 0-.195.108L4.676 16.404h.008a.22.22 0 0 0-.041.13c0 .135.109.237.238.237H19.1a.236.236 0 0 0 .237-.238a.3.3 0 0 0-.041-.129L12.184 3.838a.24.24 0 0 0-.198-.108M1.543 9.305a.24.24 0 0 0-.23.209v.035l.298 8.062v.008c0 .136.108.236.237.236q.059 0 .109-.033l1.268-.754h.005l.008-.006l.014-.007a.24.24 0 0 0 .115-.203a.1.1 0 0 0-.008-.041L1.773 9.514a.24.24 0 0 0-.23-.21zm20.908.006a.24.24 0 0 0-.23.21l-1.588 7.297c0 .014-.006.028-.006.041c0 .089.047.156.115.203l.02.014s.007 0 .013.006l1.268.76a.234.234 0 0 0 .346-.209v-.008l.299-8.063v-.007l-.006-.006V9.52a.24.24 0 0 0-.23-.21zm-12.105.828c1.064 0 1.492.698 1.492 1.35c0 .86-.611 1.193-1.317 1.58c-.311.169-.671.393-.746.63h1.995s.054.028.054.055v.766s-.027.054-.054.054H8.799s-.053-.027-.053-.054v-.368h-.014c0-.99.638-1.465 1.323-1.838c.786-.42.847-.603.847-.834c0-.142-.054-.474-.556-.474c-.38 0-.623.279-.623.713a.054.054 0 0 1-.055.054h-.82s-.055-.027-.055-.054c0-.76.488-1.58 1.553-1.58m3.431.013c.794 0 1.641.59 1.641 2.252s-.847 2.25-1.64 2.25c-.794 0-1.65-.588-1.65-2.25s.856-2.252 1.65-2.252zm-.002.854c-.657 0-.724.97-.724 1.39c0 .326.053 1.383.724 1.383c.672 0 .727-1.057.727-1.383c0-.413-.069-1.39-.727-1.39M5.4 17.523a.236.236 0 0 0-.236.239c0 .074.04.142.094.19l6.578 5.993a.24.24 0 0 0 .15.055a.23.23 0 0 0 .149-.055l6.578-5.994c.054-.047.096-.109.096-.183l.005-.006a.24.24 0 0 0-.23-.239zm-1.662.143c-.054 0-.1.02-.134.047H3.59l-1.235.74a.25.25 0 0 0-.12.21c0 .087.046.162.12.202l5.975 3.522c.034.013.075.033.115.033c.136 0 .239-.11.239-.238a.24.24 0 0 0-.063-.155l.022-.007l-4.748-4.307H3.88a.26.26 0 0 0-.143-.047zm16.496.006a.24.24 0 0 0-.136.049h-.014l-4.746 4.306a.3.3 0 0 0-.063.162c0 .136.11.237.239.237c.04 0 .081-.013.115-.033l5.975-3.514a.25.25 0 0 0 .12-.21a.23.23 0 0 0-.12-.202l.013-.008l-1.234-.738h-.014a.25.25 0 0 0-.135-.05z"/></svg>reactReact 组件（TSX）
export function Roll20Icon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 24 24"
fill="currentColor"
{...props}
dangerouslySetInnerHTML={{ __html: `<path fill="currentColor" d="M11.383 0q-.03.002-.06.014h-.037L4.03 3.654a.25.25 0 0 0-.129.211c0 .136.11.239.239.239l-.008.013a.2.2 0 0 0 .096-.021l7.181-1.567a.245.245 0 0 0 .21-.236V.225A.24.24 0 0 0 11.382 0zm1.22.008c-.128 0-.23.1-.236.222V2.3c0 .122.094.217.21.23l-.007-.013l7.182 1.574a.236.236 0 0 0 .203-.428L12.7.02h-.008l-.027-.012h-.06zm.57 3.404a.24.24 0 0 0-.237.242q0 .073.04.123l6.749 11.868c.04.06.108.101.19.101c.128 0 .229-.1.235-.223l2.428-9.921c0-.014.008-.02.008-.034a.24.24 0 0 0-.203-.23l-9.121-1.9l.013-.006s-.027-.001-.04-.008zm-2.38.012l-.06.008c-.014 0-.028-.001-.042.006l-9.12 1.9a.24.24 0 0 0-.204.23c0 .014 0 .02.006.034h.014l2.427 9.921a.24.24 0 0 0 .239.23c.081 0 .148-.04.19-.1l6.747-11.87c.02-.04.041-.073.041-.12a.24.24 0 0 0-.238-.24zm1.193.306a.24.24 0 0 0-.195.108L4.676 16.404h.008a.22.22 0 0 0-.041.13c0 .135.109.237.238.237H19.1a.236.236 0 0 0 .237-.238a.3.3 0 0 0-.041-.129L12.184 3.838a.24.24 0 0 0-.198-.108M1.543 9.305a.24.24 0 0 0-.23.209v.035l.298 8.062v.008c0 .136.108.236.237.236q.059 0 .109-.033l1.268-.754h.005l.008-.006l.014-.007a.24.24 0 0 0 .115-.203a.1.1 0 0 0-.008-.041L1.773 9.514a.24.24 0 0 0-.23-.21zm20.908.006a.24.24 0 0 0-.23.21l-1.588 7.297c0 .014-.006.028-.006.041c0 .089.047.156.115.203l.02.014s.007 0 .013.006l1.268.76a.234.234 0 0 0 .346-.209v-.008l.299-8.063v-.007l-.006-.006V9.52a.24.24 0 0 0-.23-.21zm-12.105.828c1.064 0 1.492.698 1.492 1.35c0 .86-.611 1.193-1.317 1.58c-.311.169-.671.393-.746.63h1.995s.054.028.054.055v.766s-.027.054-.054.054H8.799s-.053-.027-.053-.054v-.368h-.014c0-.99.638-1.465 1.323-1.838c.786-.42.847-.603.847-.834c0-.142-.054-.474-.556-.474c-.38 0-.623.279-.623.713a.054.054 0 0 1-.055.054h-.82s-.055-.027-.055-.054c0-.76.488-1.58 1.553-1.58m3.431.013c.794 0 1.641.59 1.641 2.252s-.847 2.25-1.64 2.25c-.794 0-1.65-.588-1.65-2.25s.856-2.252 1.65-2.252zm-.002.854c-.657 0-.724.97-.724 1.39c0 .326.053 1.383.724 1.383c.672 0 .727-1.057.727-1.383c0-.413-.069-1.39-.727-1.39M5.4 17.523a.236.236 0 0 0-.236.239c0 .074.04.142.094.19l6.578 5.993a.24.24 0 0 0 .15.055a.23.23 0 0 0 .149-.055l6.578-5.994c.054-.047.096-.109.096-.183l.005-.006a.24.24 0 0 0-.23-.239zm-1.662.143c-.054 0-.1.02-.134.047H3.59l-1.235.74a.25.25 0 0 0-.12.21c0 .087.046.162.12.202l5.975 3.522c.034.013.075.033.115.033c.136 0 .239-.11.239-.238a.24.24 0 0 0-.063-.155l.022-.007l-4.748-4.307H3.88a.26.26 0 0 0-.143-.047zm16.496.006a.24.24 0 0 0-.136.049h-.014l-4.746 4.306a.3.3 0 0 0-.063.162c0 .136.11.237.239.237c.04 0 .081-.013.115-.033l5.975-3.514a.25.25 0 0 0 .12-.21a.23.23 0 0 0-.12-.202l.013-.008l-1.234-.738h-.014a.25.25 0 0 0-.135-.05z"/>` }}
/>
);
}vueVue 3 组件
<template>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" v-html="body"></svg>
</template>
<script setup>
const body = `<path fill="currentColor" d="M11.383 0q-.03.002-.06.014h-.037L4.03 3.654a.25.25 0 0 0-.129.211c0 .136.11.239.239.239l-.008.013a.2.2 0 0 0 .096-.021l7.181-1.567a.245.245 0 0 0 .21-.236V.225A.24.24 0 0 0 11.382 0zm1.22.008c-.128 0-.23.1-.236.222V2.3c0 .122.094.217.21.23l-.007-.013l7.182 1.574a.236.236 0 0 0 .203-.428L12.7.02h-.008l-.027-.012h-.06zm.57 3.404a.24.24 0 0 0-.237.242q0 .073.04.123l6.749 11.868c.04.06.108.101.19.101c.128 0 .229-.1.235-.223l2.428-9.921c0-.014.008-.02.008-.034a.24.24 0 0 0-.203-.23l-9.121-1.9l.013-.006s-.027-.001-.04-.008zm-2.38.012l-.06.008c-.014 0-.028-.001-.042.006l-9.12 1.9a.24.24 0 0 0-.204.23c0 .014 0 .02.006.034h.014l2.427 9.921a.24.24 0 0 0 .239.23c.081 0 .148-.04.19-.1l6.747-11.87c.02-.04.041-.073.041-.12a.24.24 0 0 0-.238-.24zm1.193.306a.24.24 0 0 0-.195.108L4.676 16.404h.008a.22.22 0 0 0-.041.13c0 .135.109.237.238.237H19.1a.236.236 0 0 0 .237-.238a.3.3 0 0 0-.041-.129L12.184 3.838a.24.24 0 0 0-.198-.108M1.543 9.305a.24.24 0 0 0-.23.209v.035l.298 8.062v.008c0 .136.108.236.237.236q.059 0 .109-.033l1.268-.754h.005l.008-.006l.014-.007a.24.24 0 0 0 .115-.203a.1.1 0 0 0-.008-.041L1.773 9.514a.24.24 0 0 0-.23-.21zm20.908.006a.24.24 0 0 0-.23.21l-1.588 7.297c0 .014-.006.028-.006.041c0 .089.047.156.115.203l.02.014s.007 0 .013.006l1.268.76a.234.234 0 0 0 .346-.209v-.008l.299-8.063v-.007l-.006-.006V9.52a.24.24 0 0 0-.23-.21zm-12.105.828c1.064 0 1.492.698 1.492 1.35c0 .86-.611 1.193-1.317 1.58c-.311.169-.671.393-.746.63h1.995s.054.028.054.055v.766s-.027.054-.054.054H8.799s-.053-.027-.053-.054v-.368h-.014c0-.99.638-1.465 1.323-1.838c.786-.42.847-.603.847-.834c0-.142-.054-.474-.556-.474c-.38 0-.623.279-.623.713a.054.054 0 0 1-.055.054h-.82s-.055-.027-.055-.054c0-.76.488-1.58 1.553-1.58m3.431.013c.794 0 1.641.59 1.641 2.252s-.847 2.25-1.64 2.25c-.794 0-1.65-.588-1.65-2.25s.856-2.252 1.65-2.252zm-.002.854c-.657 0-.724.97-.724 1.39c0 .326.053 1.383.724 1.383c.672 0 .727-1.057.727-1.383c0-.413-.069-1.39-.727-1.39M5.4 17.523a.236.236 0 0 0-.236.239c0 .074.04.142.094.19l6.578 5.993a.24.24 0 0 0 .15.055a.23.23 0 0 0 .149-.055l6.578-5.994c.054-.047.096-.109.096-.183l.005-.006a.24.24 0 0 0-.23-.239zm-1.662.143c-.054 0-.1.02-.134.047H3.59l-1.235.74a.25.25 0 0 0-.12.21c0 .087.046.162.12.202l5.975 3.522c.034.013.075.033.115.033c.136 0 .239-.11.239-.238a.24.24 0 0 0-.063-.155l.022-.007l-4.748-4.307H3.88a.26.26 0 0 0-.143-.047zm16.496.006a.24.24 0 0 0-.136.049h-.014l-4.746 4.306a.3.3 0 0 0-.063.162c0 .136.11.237.239.237c.04 0 .081-.013.115-.033l5.975-3.514a.25.25 0 0 0 .12-.21a.23.23 0 0 0-.12-.202l.013-.008l-1.234-.738h-.014a.25.25 0 0 0-.135-.05z"/>`;
</script>cssCSS mask（随 currentColor 改色）
.roll20 {
width: 1em;
height: 1em;
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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.383%200q-.03.002-.06.014h-.037L4.03%203.654a.25.25%200%200%200-.129.211c0%20.136.11.239.239.239l-.008.013a.2.2%200%200%200%20.096-.021l7.181-1.567a.245.245%200%200%200%20.21-.236V.225A.24.24%200%200%200%2011.382%200zm1.22.008c-.128%200-.23.1-.236.222V2.3c0%20.122.094.217.21.23l-.007-.013l7.182%201.574a.236.236%200%200%200%20.203-.428L12.7.02h-.008l-.027-.012h-.06zm.57%203.404a.24.24%200%200%200-.237.242q0%20.073.04.123l6.749%2011.868c.04.06.108.101.19.101c.128%200%20.229-.1.235-.223l2.428-9.921c0-.014.008-.02.008-.034a.24.24%200%200%200-.203-.23l-9.121-1.9l.013-.006s-.027-.001-.04-.008zm-2.38.012l-.06.008c-.014%200-.028-.001-.042.006l-9.12%201.9a.24.24%200%200%200-.204.23c0%20.014%200%20.02.006.034h.014l2.427%209.921a.24.24%200%200%200%20.239.23c.081%200%20.148-.04.19-.1l6.747-11.87c.02-.04.041-.073.041-.12a.24.24%200%200%200-.238-.24zm1.193.306a.24.24%200%200%200-.195.108L4.676%2016.404h.008a.22.22%200%200%200-.041.13c0%20.135.109.237.238.237H19.1a.236.236%200%200%200%20.237-.238a.3.3%200%200%200-.041-.129L12.184%203.838a.24.24%200%200%200-.198-.108M1.543%209.305a.24.24%200%200%200-.23.209v.035l.298%208.062v.008c0%20.136.108.236.237.236q.059%200%20.109-.033l1.268-.754h.005l.008-.006l.014-.007a.24.24%200%200%200%20.115-.203a.1.1%200%200%200-.008-.041L1.773%209.514a.24.24%200%200%200-.23-.21zm20.908.006a.24.24%200%200%200-.23.21l-1.588%207.297c0%20.014-.006.028-.006.041c0%20.089.047.156.115.203l.02.014s.007%200%20.013.006l1.268.76a.234.234%200%200%200%20.346-.209v-.008l.299-8.063v-.007l-.006-.006V9.52a.24.24%200%200%200-.23-.21zm-12.105.828c1.064%200%201.492.698%201.492%201.35c0%20.86-.611%201.193-1.317%201.58c-.311.169-.671.393-.746.63h1.995s.054.028.054.055v.766s-.027.054-.054.054H8.799s-.053-.027-.053-.054v-.368h-.014c0-.99.638-1.465%201.323-1.838c.786-.42.847-.603.847-.834c0-.142-.054-.474-.556-.474c-.38%200-.623.279-.623.713a.054.054%200%200%201-.055.054h-.82s-.055-.027-.055-.054c0-.76.488-1.58%201.553-1.58m3.431.013c.794%200%201.641.59%201.641%202.252s-.847%202.25-1.64%202.25c-.794%200-1.65-.588-1.65-2.25s.856-2.252%201.65-2.252zm-.002.854c-.657%200-.724.97-.724%201.39c0%20.326.053%201.383.724%201.383c.672%200%20.727-1.057.727-1.383c0-.413-.069-1.39-.727-1.39M5.4%2017.523a.236.236%200%200%200-.236.239c0%20.074.04.142.094.19l6.578%205.993a.24.24%200%200%200%20.15.055a.23.23%200%200%200%20.149-.055l6.578-5.994c.054-.047.096-.109.096-.183l.005-.006a.24.24%200%200%200-.23-.239zm-1.662.143c-.054%200-.1.02-.134.047H3.59l-1.235.74a.25.25%200%200%200-.12.21c0%20.087.046.162.12.202l5.975%203.522c.034.013.075.033.115.033c.136%200%20.239-.11.239-.238a.24.24%200%200%200-.063-.155l.022-.007l-4.748-4.307H3.88a.26.26%200%200%200-.143-.047zm16.496.006a.24.24%200%200%200-.136.049h-.014l-4.746%204.306a.3.3%200%200%200-.063.162c0%20.136.11.237.239.237c.04%200%20.081-.013.115-.033l5.975-3.514a.25.25%200%200%200%20.12-.21a.23.23%200%200%200-.12-.202l.013-.008l-1.234-.738h-.014a.25.25%200%200%200-.135-.05z%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%2024%2024%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M11.383%200q-.03.002-.06.014h-.037L4.03%203.654a.25.25%200%200%200-.129.211c0%20.136.11.239.239.239l-.008.013a.2.2%200%200%200%20.096-.021l7.181-1.567a.245.245%200%200%200%20.21-.236V.225A.24.24%200%200%200%2011.382%200zm1.22.008c-.128%200-.23.1-.236.222V2.3c0%20.122.094.217.21.23l-.007-.013l7.182%201.574a.236.236%200%200%200%20.203-.428L12.7.02h-.008l-.027-.012h-.06zm.57%203.404a.24.24%200%200%200-.237.242q0%20.073.04.123l6.749%2011.868c.04.06.108.101.19.101c.128%200%20.229-.1.235-.223l2.428-9.921c0-.014.008-.02.008-.034a.24.24%200%200%200-.203-.23l-9.121-1.9l.013-.006s-.027-.001-.04-.008zm-2.38.012l-.06.008c-.014%200-.028-.001-.042.006l-9.12%201.9a.24.24%200%200%200-.204.23c0%20.014%200%20.02.006.034h.014l2.427%209.921a.24.24%200%200%200%20.239.23c.081%200%20.148-.04.19-.1l6.747-11.87c.02-.04.041-.073.041-.12a.24.24%200%200%200-.238-.24zm1.193.306a.24.24%200%200%200-.195.108L4.676%2016.404h.008a.22.22%200%200%200-.041.13c0%20.135.109.237.238.237H19.1a.236.236%200%200%200%20.237-.238a.3.3%200%200%200-.041-.129L12.184%203.838a.24.24%200%200%200-.198-.108M1.543%209.305a.24.24%200%200%200-.23.209v.035l.298%208.062v.008c0%20.136.108.236.237.236q.059%200%20.109-.033l1.268-.754h.005l.008-.006l.014-.007a.24.24%200%200%200%20.115-.203a.1.1%200%200%200-.008-.041L1.773%209.514a.24.24%200%200%200-.23-.21zm20.908.006a.24.24%200%200%200-.23.21l-1.588%207.297c0%20.014-.006.028-.006.041c0%20.089.047.156.115.203l.02.014s.007%200%20.013.006l1.268.76a.234.234%200%200%200%20.346-.209v-.008l.299-8.063v-.007l-.006-.006V9.52a.24.24%200%200%200-.23-.21zm-12.105.828c1.064%200%201.492.698%201.492%201.35c0%20.86-.611%201.193-1.317%201.58c-.311.169-.671.393-.746.63h1.995s.054.028.054.055v.766s-.027.054-.054.054H8.799s-.053-.027-.053-.054v-.368h-.014c0-.99.638-1.465%201.323-1.838c.786-.42.847-.603.847-.834c0-.142-.054-.474-.556-.474c-.38%200-.623.279-.623.713a.054.054%200%200%201-.055.054h-.82s-.055-.027-.055-.054c0-.76.488-1.58%201.553-1.58m3.431.013c.794%200%201.641.59%201.641%202.252s-.847%202.25-1.64%202.25c-.794%200-1.65-.588-1.65-2.25s.856-2.252%201.65-2.252zm-.002.854c-.657%200-.724.97-.724%201.39c0%20.326.053%201.383.724%201.383c.672%200%20.727-1.057.727-1.383c0-.413-.069-1.39-.727-1.39M5.4%2017.523a.236.236%200%200%200-.236.239c0%20.074.04.142.094.19l6.578%205.993a.24.24%200%200%200%20.15.055a.23.23%200%200%200%20.149-.055l6.578-5.994c.054-.047.096-.109.096-.183l.005-.006a.24.24%200%200%200-.23-.239zm-1.662.143c-.054%200-.1.02-.134.047H3.59l-1.235.74a.25.25%200%200%200-.12.21c0%20.087.046.162.12.202l5.975%203.522c.034.013.075.033.115.033c.136%200%20.239-.11.239-.238a.24.24%200%200%200-.063-.155l.022-.007l-4.748-4.307H3.88a.26.26%200%200%200-.143-.047zm16.496.006a.24.24%200%200%200-.136.049h-.014l-4.746%204.306a.3.3%200%200%200-.063.162c0%20.136.11.237.239.237c.04%200%20.081-.013.115-.033l5.975-3.514a.25.25%200%200%200%20.12-.21a.23.23%200%200%200-.12-.202l.013-.008l-1.234-.738h-.014a.25.25%200%200%200-.135-.05z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}给 roll20 加一点动效
单文件 CSS 即可播放，无需任何依赖；描画动效仅对描边类图标生效。
呼吸
透明度往复渐变，适合状态提示与在线指示。
css呼吸动效样式
.icon-roll20 {
animation: icon-breathe 1.8s ease-in-out infinite;
}
@keyframes icon-breathe {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}旋转
匀速循环旋转，适合加载中场景。
css旋转动效样式
.icon-roll20 {
animation: icon-spin 1.6s linear infinite;
}
@keyframes icon-spin {
to { transform: rotate(360deg); }
}SVG 健康报告
对源文件的客观技术指标，供工程侧评估引用方式。
文件体积
2.63 KB
2,695 字节
viewBox
0 0 24 24
矢量坐标系
图元总数
1
<path> ×1
风格
单色（跟随 currentColor）
填充跟随容器颜色
同时含 width/height 与 viewBox：可以只保留 viewBox，让图标跟随容器自适应缩放。 文件体积 2.63 KB（2,695 字节），图元 1 个，风格为单色（跟随 currentColor）。
常见问题
关于 roll20 图标的下载、商用与改色。
roll20 图标是什么？▾
它是 Simple Icons（simple-icons）开源图标集中的 roll20 图标，单色（跟随 currentColor），viewBox 为 0 0 24 24，文件仅 2.63 KB，矢量格式可无损缩放到任意尺寸。
如何下载 roll20 图标？▾
点击「下载与导出」中的 SVG 源文件按钮保存矢量文件；也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG，或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时，用素材包生成器一键打包。
roll20 图标可以商用吗？▾
该图标采用 CC0 1.0（CC0-1.0） 开源协议，通常允许在遵守协议的前提下免费使用，常见要求是保留作者版权声明。商用前建议阅读协议原文确认。
如何修改 roll20 图标的颜色？▾
在「预览与场景」的色板中切换颜色，三底色与全部场景会实时跟随；点击任一相近图标可打开预览弹层，复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。