Icon
<gcds-icon>

An icon is a symbol that visually represents an action or idea.

• GitHub
• Figma

Build an icon

Use an icon to emphasize an action or idea.

Coding and accessibility for icons

Select a relevant icon

Render an icon by changing the name attribute to a corresponding icon name.

Specify the sizing scale

• Change the size of an icon by setting the size attribute to a specific font size, like text-small | text |  h1 | h2 | h3 | h4 | h5 | h6.
• Match the icon size to its accompanying text by setting the size attribute to inherit.
• Set a minimum 24 x 24 pixel height/width for an interactive icon without text. If you can increase the size, 44 x 44 pixels exceeds accessibility standards, but is more accessible.

Adjust the placement

Add a margin to the left or right of an icon by setting the margin-left or margin-right attribute to a spacing value, like 0 | 25 | 50 | 75 | 100 | 125 | 150 | 175| 200 | 225| 250 | 300 | 350| 400 | 450 | 500 | 550 | 600 | 650 | 700 | 750 | 800 | 850 | 900 | 950 | 1000 | 1050 | 1100 | 1150 | 1200 | 1250.

Set label text

• Use the label property for an icon with no accompanying text.
• You don’t need to use the label property if an icon is decorative.

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.