找找图标

ads-square SVG 图标

academiconsads-square

来自 Academicons 开源图标集,矢量 SVG 可无损缩放到任意尺寸,支持在线改色、复制 React/Vue/HTML 代码。

图标 ID
academicons:ads-square
中文名
—
所属集合
Academicons
集合规模
158 枚
基础网格
32px
色彩
单色(可改色)
开源协议
OFL-1.1
作者
James Walsh

下载 ads-square 图标

SVG 矢量源文件,或 PNG 按 16~512 预设与 16~1024 自定义尺寸导出,任意尺寸边缘锐利。

px

PNG 由矢量源实时渲染,任意尺寸边缘锐利无锯齿;下载与预览均免费,无需注册。

ads-square 的预览与使用场景

切换预览颜色后,下方三底色、真实界面场景与各尺寸渲染会实时跟随。

预览颜色
ads-square 图标 浅色背景预览浅色背景
ads-square 图标 深色背景预览深色背景
ads-square 图标 灰底融入预览灰底融入

在真实界面里长这样

继续按钮内 · 主操作
搜索ads-square…输入框 · 前缀图标
ads-square导航菜单 · 选中态
暂无内容空状态 · 引导提示
9:41ads-square App 图标ads-squareads手机桌面 · App 图标
ads-squareacademicons.design/icons/ads-square浏览器 · 标签页与站点图标

各尺寸下的可读性

ads-square 图标 24px 渲染24pxads-square 图标 32px 渲染32pxads-square 图标 48px 渲染48pxads-square 图标 64px 渲染64pxads-square 图标 96px 渲染96pxads-square 图标 128px 渲染128px

复制 ads-square 图标代码

内联 SVG、React、Vue 与 CSS mask 四种主流引用方式,代码基于当前源文件生成,复制即用。

svgSVG 源码(内联 HTML)
<svg xmlns="http://www.w3.org/2000/svg" width="0.88em" height="1em" viewBox="0 0 448 512"><path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm112.582 64c21.04 0 38.096 17.057 38.096 38.096s-17.055 38.095-38.094 38.095s-38.096-17.056-38.096-38.095c0-21.04 17.053-38.096 38.094-38.096m107.893 9.59c47.872-.261 91.32 23.293 122.232 72.762h-.002c45.457 72.746 23.335 168.568-49.412 214.025c-57.476 35.915-129.358 29.647-179.422-10.447l7.441-4.65c47.287 36.352 114.047 41.57 167.602 8.107c68.878-43.04 89.824-133.767 46.785-202.645c-29.526-47.252-76.56-72.404-128.521-69.355c-14.208.83-26.246 4.947-26.246 4.947s-.628-4.325-1.534-6.969c13.92-3.76 27.672-5.702 41.077-5.775m-12.067 41.137c6.192-.045 12.47.415 18.787 1.416c62.147 9.844 104.545 68.202 94.701 130.35c-9.843 62.146-68.2 104.545-130.347 94.702c-31.116-4.928-57.282-22.021-74.418-45.66l-18.524 11.574c.575 7.13-2.679 14.34-9.1 18.508l-72.753 47.248c-9.32 6.053-21.78 3.405-27.834-5.916c-6.052-9.32-3.403-21.78 5.918-27.834l72.754-47.248c6.35-4.123 14.158-4.204 20.404-.89l19.16-11.975c-10.063-20.392-14.139-43.986-10.31-68.156c2.368-14.95 7.54-28.754 14.9-40.965c12.601.177 25.4-3.147 36.883-10.322c15.351-9.591 25.546-24.312 29.754-40.553a113 113 0 0 1 30.025-4.28m1.336 33.947c-39.612-.216-74.532 28.5-80.92 68.828c-7.048 44.5 23.312 86.29 67.813 93.338c44.5 7.048 86.29-23.311 93.338-67.813c7.048-44.5-23.313-86.29-67.813-93.338a82 82 0 0 0-12.418-1.015m-134.66 4.728c2.456 1.296 6.645 5.86 6.645 5.86c-17.008 30.403-21.889 63.72-14.99 98.25l-7.458 4.66c-8.203-37.135-2.353-75.911 15.803-108.77m134.484 21.957q16.707.001 29.682 6.6q12.973 6.6 12.973 24.906v46.469q-.001 4.835.185 11.71q.28 5.207 1.58 7.065h-.002q1.3 1.86 3.909 3.069v3.902h-28.811q-1.21-3.065-1.674-5.762q-.464-2.695-.742-6.134q-5.517 5.947-12.715 10.128q-8.601 4.926-19.445 4.926c-9.225 0-16.841-2.619-22.856-7.853q-9.02-7.853-9.02-22.258q0-18.68 14.513-27.045q7.959-4.554 23.406-6.506l9.082-1.115q7.394-.93 10.578-2.324q5.709-2.415 5.71-7.528q0-6.225-4.38-8.595q-4.381-2.37-12.86-2.37q-9.514 0-13.47 4.647q-2.827 3.438-3.768 9.293h-25.558q.84-13.288 7.467-21.84q10.546-13.385 36.216-13.385m16.254 54.465a29 29 0 0 1-5.135 2.555q-2.59.977-7.11 1.814l-6.03 1.114q-8.477 1.487-12.174 3.625q-6.256 3.624-6.256 11.246q0 6.785 3.822 9.804t9.295 3.02q8.682.002 15.996-5.018q7.316-5.02 7.596-18.31h-.004z"/></svg>
reactReact 组件(TSX)
export function AdsSquareIcon(props: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1em"
      height="1em"
      viewBox="0 0 448 512"
      fill="currentColor"
      {...props}
      dangerouslySetInnerHTML={{ __html: `<path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm112.582 64c21.04 0 38.096 17.057 38.096 38.096s-17.055 38.095-38.094 38.095s-38.096-17.056-38.096-38.095c0-21.04 17.053-38.096 38.094-38.096m107.893 9.59c47.872-.261 91.32 23.293 122.232 72.762h-.002c45.457 72.746 23.335 168.568-49.412 214.025c-57.476 35.915-129.358 29.647-179.422-10.447l7.441-4.65c47.287 36.352 114.047 41.57 167.602 8.107c68.878-43.04 89.824-133.767 46.785-202.645c-29.526-47.252-76.56-72.404-128.521-69.355c-14.208.83-26.246 4.947-26.246 4.947s-.628-4.325-1.534-6.969c13.92-3.76 27.672-5.702 41.077-5.775m-12.067 41.137c6.192-.045 12.47.415 18.787 1.416c62.147 9.844 104.545 68.202 94.701 130.35c-9.843 62.146-68.2 104.545-130.347 94.702c-31.116-4.928-57.282-22.021-74.418-45.66l-18.524 11.574c.575 7.13-2.679 14.34-9.1 18.508l-72.753 47.248c-9.32 6.053-21.78 3.405-27.834-5.916c-6.052-9.32-3.403-21.78 5.918-27.834l72.754-47.248c6.35-4.123 14.158-4.204 20.404-.89l19.16-11.975c-10.063-20.392-14.139-43.986-10.31-68.156c2.368-14.95 7.54-28.754 14.9-40.965c12.601.177 25.4-3.147 36.883-10.322c15.351-9.591 25.546-24.312 29.754-40.553a113 113 0 0 1 30.025-4.28m1.336 33.947c-39.612-.216-74.532 28.5-80.92 68.828c-7.048 44.5 23.312 86.29 67.813 93.338c44.5 7.048 86.29-23.311 93.338-67.813c7.048-44.5-23.313-86.29-67.813-93.338a82 82 0 0 0-12.418-1.015m-134.66 4.728c2.456 1.296 6.645 5.86 6.645 5.86c-17.008 30.403-21.889 63.72-14.99 98.25l-7.458 4.66c-8.203-37.135-2.353-75.911 15.803-108.77m134.484 21.957q16.707.001 29.682 6.6q12.973 6.6 12.973 24.906v46.469q-.001 4.835.185 11.71q.28 5.207 1.58 7.065h-.002q1.3 1.86 3.909 3.069v3.902h-28.811q-1.21-3.065-1.674-5.762q-.464-2.695-.742-6.134q-5.517 5.947-12.715 10.128q-8.601 4.926-19.445 4.926c-9.225 0-16.841-2.619-22.856-7.853q-9.02-7.853-9.02-22.258q0-18.68 14.513-27.045q7.959-4.554 23.406-6.506l9.082-1.115q7.394-.93 10.578-2.324q5.709-2.415 5.71-7.528q0-6.225-4.38-8.595q-4.381-2.37-12.86-2.37q-9.514 0-13.47 4.647q-2.827 3.438-3.768 9.293h-25.558q.84-13.288 7.467-21.84q10.546-13.385 36.216-13.385m16.254 54.465a29 29 0 0 1-5.135 2.555q-2.59.977-7.11 1.814l-6.03 1.114q-8.477 1.487-12.174 3.625q-6.256 3.624-6.256 11.246q0 6.785 3.822 9.804t9.295 3.02q8.682.002 15.996-5.018q7.316-5.02 7.596-18.31h-.004z"/>` }}
    />
  );
}
vueVue 3 组件
<template>
  <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 448 512" fill="currentColor" v-html="body"></svg>
</template>

<script setup>
const body = `<path fill="currentColor" d="M48 32C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm112.582 64c21.04 0 38.096 17.057 38.096 38.096s-17.055 38.095-38.094 38.095s-38.096-17.056-38.096-38.095c0-21.04 17.053-38.096 38.094-38.096m107.893 9.59c47.872-.261 91.32 23.293 122.232 72.762h-.002c45.457 72.746 23.335 168.568-49.412 214.025c-57.476 35.915-129.358 29.647-179.422-10.447l7.441-4.65c47.287 36.352 114.047 41.57 167.602 8.107c68.878-43.04 89.824-133.767 46.785-202.645c-29.526-47.252-76.56-72.404-128.521-69.355c-14.208.83-26.246 4.947-26.246 4.947s-.628-4.325-1.534-6.969c13.92-3.76 27.672-5.702 41.077-5.775m-12.067 41.137c6.192-.045 12.47.415 18.787 1.416c62.147 9.844 104.545 68.202 94.701 130.35c-9.843 62.146-68.2 104.545-130.347 94.702c-31.116-4.928-57.282-22.021-74.418-45.66l-18.524 11.574c.575 7.13-2.679 14.34-9.1 18.508l-72.753 47.248c-9.32 6.053-21.78 3.405-27.834-5.916c-6.052-9.32-3.403-21.78 5.918-27.834l72.754-47.248c6.35-4.123 14.158-4.204 20.404-.89l19.16-11.975c-10.063-20.392-14.139-43.986-10.31-68.156c2.368-14.95 7.54-28.754 14.9-40.965c12.601.177 25.4-3.147 36.883-10.322c15.351-9.591 25.546-24.312 29.754-40.553a113 113 0 0 1 30.025-4.28m1.336 33.947c-39.612-.216-74.532 28.5-80.92 68.828c-7.048 44.5 23.312 86.29 67.813 93.338c44.5 7.048 86.29-23.311 93.338-67.813c7.048-44.5-23.313-86.29-67.813-93.338a82 82 0 0 0-12.418-1.015m-134.66 4.728c2.456 1.296 6.645 5.86 6.645 5.86c-17.008 30.403-21.889 63.72-14.99 98.25l-7.458 4.66c-8.203-37.135-2.353-75.911 15.803-108.77m134.484 21.957q16.707.001 29.682 6.6q12.973 6.6 12.973 24.906v46.469q-.001 4.835.185 11.71q.28 5.207 1.58 7.065h-.002q1.3 1.86 3.909 3.069v3.902h-28.811q-1.21-3.065-1.674-5.762q-.464-2.695-.742-6.134q-5.517 5.947-12.715 10.128q-8.601 4.926-19.445 4.926c-9.225 0-16.841-2.619-22.856-7.853q-9.02-7.853-9.02-22.258q0-18.68 14.513-27.045q7.959-4.554 23.406-6.506l9.082-1.115q7.394-.93 10.578-2.324q5.709-2.415 5.71-7.528q0-6.225-4.38-8.595q-4.381-2.37-12.86-2.37q-9.514 0-13.47 4.647q-2.827 3.438-3.768 9.293h-25.558q.84-13.288 7.467-21.84q10.546-13.385 36.216-13.385m16.254 54.465a29 29 0 0 1-5.135 2.555q-2.59.977-7.11 1.814l-6.03 1.114q-8.477 1.487-12.174 3.625q-6.256 3.624-6.256 11.246q0 6.785 3.822 9.804t9.295 3.02q8.682.002 15.996-5.018q7.316-5.02 7.596-18.31h-.004z"/>`;
</script>
cssCSS mask(随 currentColor 改色)
.ads-square {
  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%220.88em%22%20height%3D%221em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M48%2032C21.5%2032%200%2053.5%200%2080v352c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48V80c0-26.5-21.5-48-48-48zm112.582%2064c21.04%200%2038.096%2017.057%2038.096%2038.096s-17.055%2038.095-38.094%2038.095s-38.096-17.056-38.096-38.095c0-21.04%2017.053-38.096%2038.094-38.096m107.893%209.59c47.872-.261%2091.32%2023.293%20122.232%2072.762h-.002c45.457%2072.746%2023.335%20168.568-49.412%20214.025c-57.476%2035.915-129.358%2029.647-179.422-10.447l7.441-4.65c47.287%2036.352%20114.047%2041.57%20167.602%208.107c68.878-43.04%2089.824-133.767%2046.785-202.645c-29.526-47.252-76.56-72.404-128.521-69.355c-14.208.83-26.246%204.947-26.246%204.947s-.628-4.325-1.534-6.969c13.92-3.76%2027.672-5.702%2041.077-5.775m-12.067%2041.137c6.192-.045%2012.47.415%2018.787%201.416c62.147%209.844%20104.545%2068.202%2094.701%20130.35c-9.843%2062.146-68.2%20104.545-130.347%2094.702c-31.116-4.928-57.282-22.021-74.418-45.66l-18.524%2011.574c.575%207.13-2.679%2014.34-9.1%2018.508l-72.753%2047.248c-9.32%206.053-21.78%203.405-27.834-5.916c-6.052-9.32-3.403-21.78%205.918-27.834l72.754-47.248c6.35-4.123%2014.158-4.204%2020.404-.89l19.16-11.975c-10.063-20.392-14.139-43.986-10.31-68.156c2.368-14.95%207.54-28.754%2014.9-40.965c12.601.177%2025.4-3.147%2036.883-10.322c15.351-9.591%2025.546-24.312%2029.754-40.553a113%20113%200%200%201%2030.025-4.28m1.336%2033.947c-39.612-.216-74.532%2028.5-80.92%2068.828c-7.048%2044.5%2023.312%2086.29%2067.813%2093.338c44.5%207.048%2086.29-23.311%2093.338-67.813c7.048-44.5-23.313-86.29-67.813-93.338a82%2082%200%200%200-12.418-1.015m-134.66%204.728c2.456%201.296%206.645%205.86%206.645%205.86c-17.008%2030.403-21.889%2063.72-14.99%2098.25l-7.458%204.66c-8.203-37.135-2.353-75.911%2015.803-108.77m134.484%2021.957q16.707.001%2029.682%206.6q12.973%206.6%2012.973%2024.906v46.469q-.001%204.835.185%2011.71q.28%205.207%201.58%207.065h-.002q1.3%201.86%203.909%203.069v3.902h-28.811q-1.21-3.065-1.674-5.762q-.464-2.695-.742-6.134q-5.517%205.947-12.715%2010.128q-8.601%204.926-19.445%204.926c-9.225%200-16.841-2.619-22.856-7.853q-9.02-7.853-9.02-22.258q0-18.68%2014.513-27.045q7.959-4.554%2023.406-6.506l9.082-1.115q7.394-.93%2010.578-2.324q5.709-2.415%205.71-7.528q0-6.225-4.38-8.595q-4.381-2.37-12.86-2.37q-9.514%200-13.47%204.647q-2.827%203.438-3.768%209.293h-25.558q.84-13.288%207.467-21.84q10.546-13.385%2036.216-13.385m16.254%2054.465a29%2029%200%200%201-5.135%202.555q-2.59.977-7.11%201.814l-6.03%201.114q-8.477%201.487-12.174%203.625q-6.256%203.624-6.256%2011.246q0%206.785%203.822%209.804t9.295%203.02q8.682.002%2015.996-5.018q7.316-5.02%207.596-18.31h-.004z%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%220.88em%22%20height%3D%221em%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M48%2032C21.5%2032%200%2053.5%200%2080v352c0%2026.5%2021.5%2048%2048%2048h352c26.5%200%2048-21.5%2048-48V80c0-26.5-21.5-48-48-48zm112.582%2064c21.04%200%2038.096%2017.057%2038.096%2038.096s-17.055%2038.095-38.094%2038.095s-38.096-17.056-38.096-38.095c0-21.04%2017.053-38.096%2038.094-38.096m107.893%209.59c47.872-.261%2091.32%2023.293%20122.232%2072.762h-.002c45.457%2072.746%2023.335%20168.568-49.412%20214.025c-57.476%2035.915-129.358%2029.647-179.422-10.447l7.441-4.65c47.287%2036.352%20114.047%2041.57%20167.602%208.107c68.878-43.04%2089.824-133.767%2046.785-202.645c-29.526-47.252-76.56-72.404-128.521-69.355c-14.208.83-26.246%204.947-26.246%204.947s-.628-4.325-1.534-6.969c13.92-3.76%2027.672-5.702%2041.077-5.775m-12.067%2041.137c6.192-.045%2012.47.415%2018.787%201.416c62.147%209.844%20104.545%2068.202%2094.701%20130.35c-9.843%2062.146-68.2%20104.545-130.347%2094.702c-31.116-4.928-57.282-22.021-74.418-45.66l-18.524%2011.574c.575%207.13-2.679%2014.34-9.1%2018.508l-72.753%2047.248c-9.32%206.053-21.78%203.405-27.834-5.916c-6.052-9.32-3.403-21.78%205.918-27.834l72.754-47.248c6.35-4.123%2014.158-4.204%2020.404-.89l19.16-11.975c-10.063-20.392-14.139-43.986-10.31-68.156c2.368-14.95%207.54-28.754%2014.9-40.965c12.601.177%2025.4-3.147%2036.883-10.322c15.351-9.591%2025.546-24.312%2029.754-40.553a113%20113%200%200%201%2030.025-4.28m1.336%2033.947c-39.612-.216-74.532%2028.5-80.92%2068.828c-7.048%2044.5%2023.312%2086.29%2067.813%2093.338c44.5%207.048%2086.29-23.311%2093.338-67.813c7.048-44.5-23.313-86.29-67.813-93.338a82%2082%200%200%200-12.418-1.015m-134.66%204.728c2.456%201.296%206.645%205.86%206.645%205.86c-17.008%2030.403-21.889%2063.72-14.99%2098.25l-7.458%204.66c-8.203-37.135-2.353-75.911%2015.803-108.77m134.484%2021.957q16.707.001%2029.682%206.6q12.973%206.6%2012.973%2024.906v46.469q-.001%204.835.185%2011.71q.28%205.207%201.58%207.065h-.002q1.3%201.86%203.909%203.069v3.902h-28.811q-1.21-3.065-1.674-5.762q-.464-2.695-.742-6.134q-5.517%205.947-12.715%2010.128q-8.601%204.926-19.445%204.926c-9.225%200-16.841-2.619-22.856-7.853q-9.02-7.853-9.02-22.258q0-18.68%2014.513-27.045q7.959-4.554%2023.406-6.506l9.082-1.115q7.394-.93%2010.578-2.324q5.709-2.415%205.71-7.528q0-6.225-4.38-8.595q-4.381-2.37-12.86-2.37q-9.514%200-13.47%204.647q-2.827%203.438-3.768%209.293h-25.558q.84-13.288%207.467-21.84q10.546-13.385%2036.216-13.385m16.254%2054.465a29%2029%200%200%201-5.135%202.555q-2.59.977-7.11%201.814l-6.03%201.114q-8.477%201.487-12.174%203.625q-6.256%203.624-6.256%2011.246q0%206.785%203.822%209.804t9.295%203.02q8.682.002%2015.996-5.018q7.316-5.02%207.596-18.31h-.004z%22%2F%3E%3C%2Fsvg%3E") no-repeat center / contain;
}

给 ads-square 加一点动效

单文件 CSS 即可播放,无需任何依赖;描画动效仅对描边类图标生效。

ads-square 呼吸动效演示

呼吸

透明度往复渐变,适合状态提示与在线指示。

css呼吸动效样式
.icon-ads-square {
  animation: icon-breathe 1.8s ease-in-out infinite;
}

@keyframes icon-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
ads-square 旋转动效演示

旋转

匀速循环旋转,适合加载中场景。

css旋转动效样式
.icon-ads-square {
  animation: icon-spin 1.6s linear infinite;
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

SVG 健康报告

对源文件的客观技术指标,供工程侧评估引用方式。

文件体积

2.36 KB

2,412 字节

viewBox

0 0 448 512

矢量坐标系

图元总数

1

<path> ×1

风格

单色(跟随 currentColor)

填充跟随容器颜色

同时含 width/height 与 viewBox:可以只保留 viewBox,让图标跟随容器自适应缩放。 文件体积 2.36 KB(2,412 字节),图元 1 个,风格为单色(跟随 currentColor)。

常见问题

关于 ads-square 图标的下载、商用与改色。

ads-square 图标是什么?▾

它是 Academicons(academicons)开源图标集中的 ads-square 图标,单色(跟随 currentColor),viewBox 为 0 0 448 512,文件仅 2.36 KB,矢量格式可无损缩放到任意尺寸。

如何下载 ads-square 图标?▾

点击「下载与导出」中的 SVG 源文件按钮保存矢量文件;也可以按 512 / 256 / 128 / 64 / 32 / 16px 预设导出 PNG,或在输入框填 16~1024 之间的任意尺寸。需要 iOS、Android 全套尺寸时,用素材包生成器一键打包。

ads-square 图标可以商用吗?▾

该图标采用 Open Font License(OFL-1.1) 开源协议,通常允许在遵守协议的前提下免费使用,常见要求是保留作者版权声明。商用前建议阅读协议原文确认。

如何修改 ads-square 图标的颜色?▾

在「预览与场景」的色板中切换颜色,三底色与全部场景会实时跟随;点击任一相近图标可打开预览弹层,复制对应颜色的 SVG 源码或 PNG。也可以复制 SVG 源码后自行修改 fill 值。

Academicons 中的相近图标

ads