跳到主要内容
网站首页

图标库

← Devicon
Postcss

Postcss

postcss

图标库
Devicon
作者
Devicon Contributors
许可
MIT

正在读取图标颜色…

使用场景

颜色与描边跟随预览参数实时变化，以下为常见界面中的渲染效果。

按钮内

输入框

搜索Postcss...

导航

Postcss

空状态

暂无内容

场景预览

桌面 / 浏览器 / 按钮 / 导航栏

手机桌面 · App 图标

9:41
Postcss

浏览器 · 标签页与站点

59764d8cfa53196f.example
Postcss开始使用

操作按钮 · 主次层级

Postcss了解更多

底部导航 · Tab 栏

Postcss推荐收藏我的

UI 使用示例

真实组件上下文中的渲染效果，代码可直接复制。

导航项

导航菜单

导航菜单
html
<a href="#" class="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-neutral-700 hover:bg-neutral-100 dark:text-neutral-200 dark:hover:bg-neutral-800">
  <!-- 内联 Postcss SVG -->
  <span>导航菜单</span>
</a>

主要按钮

立即开始

html
<button class="inline-flex items-center gap-2 rounded-lg bg-neutral-900 px-4 py-2 text-sm font-medium text-white dark:bg-neutral-100 dark:text-neutral-900">
  <!-- 内联 Postcss SVG -->
  立即开始
</button>

React 组件

内联引入

react
import { PostcssIcon } from './icons';

function Nav() {
  return <PostcssIcon className="size-4" />;
}

状态徽标

已完成

已完成
html
<span class="inline-flex items-center gap-1.5 rounded-full bg-neutral-100 px-2.5 py-1 text-xs font-medium text-neutral-700">
  <!-- 内联 Postcss SVG -->
  已完成
</span>

输入框前缀

搜索框

搜索Postcss…
html
<div class="flex items-center gap-2 rounded-lg border border-neutral-200 px-3 py-2 text-sm">
  <!-- 内联 Postcss SVG -->
  <input placeholder="搜索Postcss…" class="w-full outline-none" />
</div>

功能卡片

功能名称

功能名称

功能的一句话说明。

html
<div class="rounded-xl border border-neutral-200 p-4">
  <span class="flex size-9 items-center justify-center rounded-lg bg-neutral-900 text-white">
    <!-- 内联 Postcss SVG -->
  </span>
  <p class="mt-3 text-sm font-medium">功能名称</p>
  <p class="mt-1 text-xs text-neutral-500">功能的一句话说明。</p>
</div>

动效图标

为 Postcss 添加 CSS 动效，导出的 SVG 内嵌样式，单文件即可播放，无需任何依赖。

描画

线条从无到有依次绘出，适合线性图标

.icon-59764d8cfa53196f { stroke-dasharray: 1; animation: svg-draw 1.2s forwards; }

呼吸

透明度往复渐变，适合状态提示图标

.icon-59764d8cfa53196f { animation: svg-breathe 1.8s infinite; }

旋转

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

.icon-59764d8cfa53196f { animation: svg-spin 1.6s linear infinite; }

用法示例

Postcss 在真实界面中的三种常见用法。

继续下一步

按钮内
16px · action 触发

Postcss

导航项
18px · 列表选中态

暂无数据

空状态
40px · 引导提示

各尺寸下的 Postcss

24px 到 128px 六个常用尺寸的真实渲染，用于检查小尺寸下的可读性。

24px

32px

48px

64px

96px

128px

下载 Postcss 图标

SVG 矢量文件、PNG 位图（预设 16~512px 或自定义 16~1024px）、Favicon 包、App 图标包（iOS + Android）与矢量 PDF 一键导出；下载前可在下方「预览参数」改色，导出文件同步生效。

按预览颜色导出px（16~1024）

复制 Postcss 图标代码

Web、移动端、桌面端与小程序共 17 种格式；代码基于当前预览颜色生成，复制即用。

svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill="#dd3a0a" d="M19.344 60.441c-.172.305-.344.563-.516.868l-.258-.133c-.175.992-.78 1.86-1.383 2.031c.172.086.344.172.477.129c.125-.043.211-.262.3-.39l1.165-1.684l.39-.653l-.171-.172ZM4.964 79.426c.22 0 .434.043.692.043c0-.172.219-.133.219-.301h.129c0 .215.043.387.043.605H5.14c-.043-.043-.215-.304-.172-.347Zm-.343-1.989c-.129-.132-.344-.257-.344-.39c-.043-.168.086-.383.215-.602c.086.305.13.563.215.868c-.043.039-.086.082-.086.124m1.082-2.769c.172.437.344.914.516 1.348c-.043 0-.301.129-.344.171c-.172-.433-.387-.91-.563-1.34c.043-.042.305-.175.391-.175Zm96.129 41.344c.215-.082.473-.13.82-.211c-.39.3-.691.515-.949.773c-.047-.039-.09-.086-.133-.086c.086-.172.172-.3.262-.476M48.754 24.64c.254-.176.473-.305.73-.477l.086.086c-.261.344-.476.688-.777 1.121c-.043-.297-.043-.473-.09-.687c-.043 0 0 0 .047-.043Zm12.652 21.88c.387-.176.778-.344 1.25-.563c-.043.258-.043.434-.043.605a1.6 1.6 0 0 0-.433-.085c-.258.043-.735.386-.95.43c-.042 0 .172-.344.172-.387Zm32.39 36.667c.087.434.907.649.087 1.083c.133.09.258.128.387.218a.32.32 0 0 1-.086.176c-.086.04-.258.125-.344.082c-.043 0-.13-.172-.13-.258c0-.39.044-.777.087-1.297Zm0-8.648c.044 0 .087.043.087.043l-.043-.047c0-.043 0-.043-.043 0Zm6.825 42.727c-.476.343-.953.648-1.558.777c-.043-.043-.043-.086-.086-.133c.476-.3.992-.601 1.468-.906c.043.082.13.172.172.258ZM19.648 58.668c.477-.602.954-1.207 1.47-1.813c.038.043.382.13.429.172c-.477.606-1.125 1.426-1.602 2.075c-.086-.086-.215-.387-.3-.434ZM7.383 79.859c-.344-.734-.692-1.511-1.035-2.246c.043-.043.343-.175.386-.175c.477.69.692 1.511 1.04 2.25c0 0-.344.171-.391.171m11.012-20.757c-.258.39-.516.824-.778 1.214c-.043-.046-.515.172-.558.13c.257-.391.906-1.083 1.164-1.473c.043.043.086.09.172.132ZM96 119.039c.043 0 .043-.039.086-.039c.3.04.644.082.992.082c-.562.39-.91.348-1.082-.043ZM18.477 60.918c.046-.129.132-.258.218-.387c.086 0 .215-.047.215-.047c.176-.3.176-.515.348-.777c-.043-.043-.086-.043-.133-.086c-.258.176-.516.395-.773.566c.085.086.085.13.085.215c-.343-.043-.476.133-.648.606c-.043.133-.258.172-.477.344c-.042.09-.085.304-.171.52l.043.046a.7.7 0 0 1-.215.133c-.258.258-.563.476-.82.73c-.044.133-.087.262-.087.39c.305-.3.82-.862 1.211-1.21l.043.043c.172-.258.301-.516.477-.777c.039.043.039.086.086.132c-.133.344-.262.73-.39 1.078c-.09.043-.22.13-.22.086c-.171.133-.3.301-.476.434l-.777.516c-.43.39-.864.734-1.336 
…

预览参数

调整颜色、描边或开启轮廓化，使用场景与用法示例实时跟随。

风格变体

细线 · 1.2px · 密集布局

常规 · 2px · 通用界面

加粗 · 3.5px · 大尺寸标题

关于 Postcss 图标

Postcss 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。该品牌在所属行业的官方标识。

在本页点击「下载」即可保存 Postcss 的 SVG 矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

Postcss 的品牌标志与名称版权归其品牌方所有，本站内容仅供学习与设计识别参考，请勿用于商标注册或误导性用途；商用前请确认品牌官方的使用规范与授权要求。文件体积 23.91 KB，viewBox 为 0 0 128 128，共 1 个矢量图元。

常见问题

Postcss 图标是什么？

Postcss 是通用分类下的矢量图标（SVG 格式），矢量特性意味着任意缩放不失真，适配网页、App、演示文稿与印刷物料。

如何下载 Postcss 图标？

在本页点击「下载 SVG」即可保存 Postcss 的矢量文件，或在下载面板中选择 PNG（16~512px）与 Favicon 包等导出方式；也可以直接复制 SVG 源码、Data URI 或 React/Vue 组件代码。

Postcss 图标可以商用吗？

Postcss 为品牌标志，版权归品牌方所有，本站内容仅供识别参考；商用前请先确认对应品牌的使用规范与授权要求。

如何修改 Postcss 图标的颜色？

在「预览参数」面板中调整颜色与描边宽度，使用场景与用法示例会实时跟随，确认效果后再复制或下载即可。

SVG 健康报告

100/100

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

文件体积

23.91 KB

24,479 字节

viewBox

0 0 128 128

同时含 width/height 与 viewBox，可仅保留 viewBox 以自适应容器

图元总数

1

<path> ×1

风格

单色品牌

1 种品牌色 · 纯填充

提取色值#dd3a0a

同色系图标

品牌色 #dd3a0a 的同色相色阶，点击复制色值；下方为同分类中可搭配使用的图标。

#feece7#fcd1c4#faa38a#f76e46#ea3d0b#dd3a0a#992807#5e1904
Postcss 品牌色详表
色值RGBHSLCMYK色名
221, 58, 1014°, 91%, 45%0, 74, 95, 13品牌主色 · 棕色
252, 209, 19614°, 90%, 88%0, 17, 22, 1粉红色
250, 163, 13813°, 92%, 76%0, 35, 45, 2驼色
247, 110, 7014°, 92%, 62%0, 55, 72, 3驼色

图标信息摘要

Postcss 是一个通用类别的单文件 SVG 矢量图标，文件体积 23.91 KB，协议为™ 品牌商标（版权归品牌方，仅供识别参考）。可在本站免费下载 Postcss的 SVG 源文件与 PNG 位图（16-512px），支持自定义颜色与描边宽度、一键生成 Favicon 包，并提供 React / Vue 组件代码与 Data URI 引用。

继续探索

相关搜索

暂无推荐

Postcss 在其他图标库

同名不同风格的版本，点击查看与下载

Command Palette

Search for a command to run...