職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons

Post on:2026年5月18日

sponsorsr

コードを理解するデザインツール向けに、CSSの各プロパティや値をデザインしてアイコン化したCascade Iconsを紹介します。

display: flex;, display: grid;はもちろん、position: sticky;, padding, margin, text-align, opacity, box-shadow, border-radiusなど、なじみ深いプロパティや値が15x15ピクセルにデザインされています。

Cascade Icons
Cascade Icons -GitHub

Cascade IconsはCSSの各プロパティをあらわした、丹精込めてデザインされたアイコン素材です。コードを理解するデザインツール向けに制作されています。

MITライセンスで、商用プロジェクトでも無料で利用できます。

Cascade Icons

Cascade Iconsのアイコンは、CSSのプロパティとその値を表す97種類があります。ReactコンポーネントやSVGファイルとして利用できます。

display: flex;のアイコン

すべてのアイコンは、15x15ピクセルのグリッドに収まり、1倍解像度でも鮮明なエッジで、くっきり表示されます。

display: grid;のアイコン

アイコンの利用方法は、簡単です。

npm install @designtools/cascade

1	npm install @designtools/cascade

あとは、インポートするだけ。

import { DisplayFlex, PaddingTop, FlexDirectionRow } from "@designtools/cascade";

function App() {
  return (
    <div>
      <DisplayFlex />
      <PaddingTop />
      <FlexDirectionRow />
    </div>
  );
}

import { DisplayFlex, PaddingTop, FlexDirectionRow } from "@designtools/cascade";

function App() {

return (

<div>

</div>

);

}

すべてのアイコンは標準のSVG属性（SVGAttributes<SVGSVGElement>）に加えて、以下のプロパティも使用できます。

color: アイコンのカラー。デフォルトで親テキストの色を継承。
solid: 完全な不透明度でレンダリング。
width: アイコンの幅。美しく表示するには、15の倍数を使用。
height: アイコンの高さ。美しく表示するには、15の倍数を使用。

アイコンには、以下のCSSのプロパティと値がデザインされています。

カテゴリ	数	アイコン
Display	8	`DisplayBlock`, `DisplayFlex`, `DisplayGrid`, `DisplayNone`
Flex direction	4	`FlexDirectionRow`, `FlexDirectionColumn`
Flex wrap	3	`FlexWrapWrap`, `FlexWrapNowrap`
Flex grow/shrink	2	`FlexGrow`, `FlexShrink`
Justify content	6	`JustifyContentCenter`, `JustifyContentSpaceBetween`
Align items	7	`AlignItemsCenter`, `AlignItemsStretch`
Align self	8	`AlignSelfCenter`, `AlignSelfStretch`
Align content	9	`AlignContentCenter`, `AlignContentSpaceBetween`
Position	5	`PositionAbsolute`, `PositionSticky`
Padding	5	`PaddingAll`, `PaddingTop`
Margin	5	`MarginAll`, `MarginTop`
Gap	2	`GapColumn`, `GapRow`
Size	2	`SizeHorizontal`, `SizeVertical`
Axis	2	`AxisX`, `AxisY`
Border radius	5	`BorderRadiusAll`, `BorderRadiusTopLeft`
Border style/width	2	`BorderStyle`, `BorderWidth`
Overflow	4	`OverflowVisible`, `OverflowScroll`
Text align	4	`TextAlignLeft`, `TextAlignCenter`
Text decoration	3	`TextDecorationUnderline`, `TextDecorationNone`
Text transform	3	`TextTransformUppercase`, `TextTransformCapitalize`
Typography	5	`FontFamily`, `FontSize`, `FontWeight`, `LineHeight`, `LetterSpacing`
Opacity	1	`Opacity`
Box shadow	1	`BoxShadow`