{
 "name": "component",
 "title": "Component",
 "component": "ComponentIcon",
 "url": "https://gentleface.com/icons/component",
 "category": "design",
 "motif": "component",
 "added": "2026-10-19",
 "history": [
  {
   "date": "2026-10-19",
   "what": [
    "added"
   ]
  }
 ],
 "geometry_hash": "6af71ce581fe",
 "use_for": [
  "component",
  "design component",
  "create component"
 ],
 "dont_confuse_with": [
  {
   "icon": "puzzle",
   "why": "the puzzle piece means plugin or extension",
   "concept": "component"
  }
 ],
 "also_fits": [
  {
   "concept": "toy",
   "owner": "toy-brick",
   "why": "a reusable UI or design component"
  }
 ],
 "family": [],
 "tags": [
  "component",
  "design-component",
  "main-component",
  "design-system",
  "figma",
  "symbol",
  "reusable",
  "ui-kit",
  "diamonds"
 ],
 "size": 16,
 "styles": [
  "line-round",
  "line-soft",
  "line-sharp",
  "solid-round",
  "solid-soft",
  "solid-sharp"
 ],
 "default_style": "line-round",
 "svg": {
  "line-round": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z\"/></svg>",
  "line-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M9.854 3.854L7.854 5.854C7.754 5.953 7.636 6.003 7.5 6.003C7.364 6.003 7.246 5.953 7.146 5.854L5.146 3.854C5.049 3.756 5 3.638 5 3.5C5 3.362 5.049 3.244 5.146 3.146L7.146 1.146C7.244 1.049 7.362 1 7.5 1C7.638 1 7.756 1.049 7.854 1.146L9.854 3.146C9.953 3.246 10.003 3.364 10.003 3.5C10.003 3.636 9.953 3.754 9.854 3.854ZM11.854 9.854C11.754 9.953 11.636 10.003 11.5 10.003C11.364 10.003 11.246 9.953 11.146 9.854L9.146 7.854C9.047 7.754 8.997 7.636 8.997 7.5C8.997 7.364 9.047 7.246 9.146 7.146L11.146 5.146C11.246 5.047 11.364 4.997 11.5 4.997C11.636 4.997 11.754 5.047 11.854 5.146L13.854 7.146C13.953 7.246 14.003 7.364 14.003 7.5C14.003 7.636 13.953 7.754 13.854 7.854L11.854 9.854ZM5.854 7.146C5.953 7.246 6.003 7.364 6.003 7.5C6.003 7.636 5.953 7.754 5.854 7.854L3.854 9.854C3.754 9.953 3.636 10.003 3.5 10.003C3.364 10.003 3.246 9.953 3.146 9.854L1.146 7.854C1.049 7.756 1 7.638 1 7.5C1 7.362 1.049 7.244 1.146 7.146L3.146 5.146C3.244 5.049 3.362 5 3.5 5C3.638 5 3.756 5.049 3.854 5.146L5.854 7.146ZM10.003 11.5C10.003 11.636 9.953 11.754 9.854 11.854L7.854 13.854C7.754 13.953 7.636 14.003 7.5 14.003C7.364 14.003 7.246 13.953 7.146 13.854L5.146 11.854C5.047 11.754 4.997 11.636 4.997 11.5C4.997 11.364 5.047 11.246 5.146 11.146L7.146 9.146C7.246 9.047 7.364 8.997 7.5 8.997C7.636 8.997 7.754 9.047 7.854 9.146L9.854 11.146C9.953 11.246 10.003 11.364 10.003 11.5Z\"/></svg>",
  "line-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M7.5 6.207L4.793 3.5L7.293 1L7.707 1L10.207 3.5L7.5 6.207ZM1 7.707L1 7.293L3.5 4.793L6.207 7.5L3.5 10.207L1 7.707ZM11.5 10.207L8.793 7.5L11.5 4.793L14.207 7.5L11.5 10.207ZM7.5 14.207L4.793 11.5L7.5 8.793L10.207 11.5L7.5 14.207Z\"/></svg>",
  "solid-round": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M9.5 4.207L8.207 5.5C8.012 5.695 7.776 5.793 7.5 5.793C7.224 5.793 6.988 5.695 6.793 5.5L5.5 4.207C5.305 4.012 5.207 3.776 5.207 3.5C5.207 3.224 5.305 2.988 5.5 2.793L6.793 1.5C6.988 1.305 7.224 1.207 7.5 1.207C7.776 1.207 8.012 1.305 8.207 1.5L9.5 2.793C9.695 2.988 9.793 3.224 9.793 3.5C9.793 3.776 9.695 4.012 9.5 4.207ZM5.5 6.793C5.695 6.988 5.793 7.224 5.793 7.5C5.793 7.776 5.695 8.012 5.5 8.207L4.207 9.5C4.012 9.695 3.776 9.793 3.5 9.793C3.224 9.793 2.988 9.695 2.793 9.5L1.5 8.207C1.305 8.012 1.207 7.776 1.207 7.5C1.207 7.224 1.305 6.988 1.5 6.793L2.793 5.5C2.988 5.305 3.224 5.207 3.5 5.207C3.776 5.207 4.012 5.305 4.207 5.5L5.5 6.793ZM13.5 8.207L12.207 9.5C12.012 9.695 11.776 9.793 11.5 9.793C11.224 9.793 10.988 9.695 10.793 9.5L9.5 8.207C9.305 8.012 9.207 7.776 9.207 7.5C9.207 7.224 9.305 6.988 9.5 6.793L10.793 5.5C10.988 5.305 11.224 5.207 11.5 5.207C11.776 5.207 12.012 5.305 12.207 5.5L13.5 6.793C13.695 6.988 13.793 7.224 13.793 7.5C13.793 7.776 13.695 8.012 13.5 8.207ZM9.5 12.207L8.207 13.5C8.012 13.695 7.776 13.793 7.5 13.793C7.224 13.793 6.988 13.695 6.793 13.5L5.5 12.207C5.305 12.012 5.207 11.776 5.207 11.5C5.207 11.224 5.305 10.988 5.5 10.793L6.793 9.5C6.988 9.305 7.224 9.207 7.5 9.207C7.776 9.207 8.012 9.305 8.207 9.5L9.5 10.793C9.695 10.988 9.793 11.224 9.793 11.5C9.793 11.776 9.695 12.012 9.5 12.207Z\"/></svg>",
  "solid-soft": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M9.854 3.854L7.854 5.854C7.754 5.953 7.636 6.003 7.5 6.003C7.364 6.003 7.246 5.953 7.146 5.854L5.146 3.854C5.049 3.756 5 3.638 5 3.5C5 3.362 5.049 3.244 5.146 3.146L7.146 1.146C7.244 1.049 7.362 1 7.5 1C7.638 1 7.756 1.049 7.854 1.146L9.854 3.146C9.953 3.246 10.003 3.364 10.003 3.5C10.003 3.636 9.953 3.754 9.854 3.854ZM11.854 9.854C11.754 9.953 11.636 10.003 11.5 10.003C11.364 10.003 11.246 9.953 11.146 9.854L9.146 7.854C9.047 7.754 8.997 7.636 8.997 7.5C8.997 7.364 9.047 7.246 9.146 7.146L11.146 5.146C11.246 5.047 11.364 4.997 11.5 4.997C11.636 4.997 11.754 5.047 11.854 5.146L13.854 7.146C13.953 7.246 14.003 7.364 14.003 7.5C14.003 7.636 13.953 7.754 13.854 7.854L11.854 9.854ZM5.854 7.146C5.953 7.246 6.003 7.364 6.003 7.5C6.003 7.636 5.953 7.754 5.854 7.854L3.854 9.854C3.754 9.953 3.636 10.003 3.5 10.003C3.364 10.003 3.246 9.953 3.146 9.854L1.146 7.854C1.049 7.756 1 7.638 1 7.5C1 7.362 1.049 7.244 1.146 7.146L3.146 5.146C3.244 5.049 3.362 5 3.5 5C3.638 5 3.756 5.049 3.854 5.146L5.854 7.146ZM10.003 11.5C10.003 11.636 9.953 11.754 9.854 11.854L7.854 13.854C7.754 13.953 7.636 14.003 7.5 14.003C7.364 14.003 7.246 13.953 7.146 13.854L5.146 11.854C5.047 11.754 4.997 11.636 4.997 11.5C4.997 11.364 5.047 11.246 5.146 11.146L7.146 9.146C7.246 9.047 7.364 8.997 7.5 8.997C7.636 8.997 7.754 9.047 7.854 9.146L9.854 11.146C9.953 11.246 10.003 11.364 10.003 11.5Z\"/></svg>",
  "solid-sharp": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"currentColor\"><path d=\"M7.5 6.207L4.793 3.5L7.293 1L7.707 1L10.207 3.5L7.5 6.207ZM1 7.707L1 7.293L3.5 4.793L6.207 7.5L3.5 10.207L1 7.707ZM11.5 10.207L8.793 7.5L11.5 4.793L14.207 7.5L11.5 10.207ZM7.5 14.207L4.793 11.5L7.5 8.793L10.207 11.5L7.5 14.207Z\"/></svg>"
 },
 "svg_url": {
  "line-round": "https://gentleface.com/svg/line-round/16/component.svg",
  "line-soft": "https://gentleface.com/svg/line-soft/16/component.svg",
  "line-sharp": "https://gentleface.com/svg/line-sharp/16/component.svg",
  "solid-round": "https://gentleface.com/svg/solid-round/16/component.svg",
  "solid-soft": "https://gentleface.com/svg/solid-soft/16/component.svg",
  "solid-sharp": "https://gentleface.com/svg/solid-sharp/16/component.svg"
 },
 "png_url": {
  "line-round": {
   "16": "https://gentleface.com/png/line-round/16/component.png",
   "32": "https://gentleface.com/png/line-round/32/component.png",
   "48": "https://gentleface.com/png/line-round/48/component.png"
  },
  "line-soft": {
   "16": "https://gentleface.com/png/line-soft/16/component.png",
   "32": "https://gentleface.com/png/line-soft/32/component.png",
   "48": "https://gentleface.com/png/line-soft/48/component.png"
  },
  "line-sharp": {
   "16": "https://gentleface.com/png/line-sharp/16/component.png",
   "32": "https://gentleface.com/png/line-sharp/32/component.png",
   "48": "https://gentleface.com/png/line-sharp/48/component.png"
  },
  "solid-round": {
   "16": "https://gentleface.com/png/solid-round/16/component.png",
   "32": "https://gentleface.com/png/solid-round/32/component.png",
   "48": "https://gentleface.com/png/solid-round/48/component.png"
  },
  "solid-soft": {
   "16": "https://gentleface.com/png/solid-soft/16/component.png",
   "32": "https://gentleface.com/png/solid-soft/32/component.png",
   "48": "https://gentleface.com/png/solid-soft/48/component.png"
  },
  "solid-sharp": {
   "16": "https://gentleface.com/png/solid-sharp/16/component.png",
   "32": "https://gentleface.com/png/solid-sharp/32/component.png",
   "48": "https://gentleface.com/png/solid-sharp/48/component.png"
  }
 },
 "license": "MIT",
 "author": "Alexander Kiselev"
}