# Icon Icons are visual symbols used to represent ideas, themes, or actions. They communicate the message at a glance and draw attention to important (interactive) information. Always use an `Icon` component to encapsulate an SVG icon for proper styling and sizing. Our icons can only be used on websites where the City of Amsterdam is the main communicator. ## Interactive elements Use an icon to support textual interactive elements like buttons and links. Always try to provide accompanying text for an icon. Only use icons without accompanying text if they adhere to international standards, such as menu (hamburger icon), search (magnifying glass), next, previous, play, pause, etc. ## Colour Icons are black or white. When used as part of an interactive element, they are blue. When disabled, they are grey. They must adhere to the same contrast ratio for accessibility as typography against a background colour. The icon defaults to the colour of the container it is in. ## Alignment Icons are aligned to the left of the text by default and vertically centred to the middle of the first line of text. ## Size Icons have extra whitespace at their top and bottom to match the line height of text components. Specify the appropriate size to pair an icon with small or large body text or with a heading. [Read more in the typography documentation](/docs/brand-design-tokens-typography--docs). ## Overview [You can find an overview of the available icons here](/docs/brand-assets-icons--docs).