Get started

Icons

334 outline icons drawn for tectra, 19 brand logos and 250 country flags — all plain SVG. Use an icon by its name, for example 'trash', in <tx-icon> or any icon input.

Icons

Brands

Flags

Stroke 1.75

Palette

<tx-icon name="palette" />

Use them

In a template

The icon takes the font size and the colour of the text around it.

template.html

<tx-icon name="trash" />

<tx-icon name="bell" [style.font-size.px]="20" />

Any icon input

Buttons, tags, messages, menus and fields take the same names.

template.html

<button txButton icon="plus">Add</button>

<tx-tag value="Paid" icon="check" severity="success" />

<tx-message severity="warn" icon="exclamation-triangle" text="Check the dates" />

Size and stroke

Two tokens, set anywhere — on one icon, a toolbar or the whole app.

styles.css

.toolbar tx-icon {
  --tx-icon-size: 20px;
  --tx-icon-stroke-width: 1.5;
}

Your own icons

Paths on the 24 × 24 grid: a string is stroked, an object can be filled.

app.config.ts

provideTxIcons({
  sparkle: ['M12 3v18', 'M3 12h18'],
  'my-logo': [{ d: 'M4 4h16v16H4z', fill: true, stroke: false }],
});

Brand logos

An optional package; the logos are registered by name like any icon.

app.config.ts

import { provideTxBrandIcons } from '@tectra-ng/brand-icons';

providers: [provideTxBrandIcons()];

Country flags

Each flag is its own small chunk, loaded the first time it is shown.

app.config.ts

import { loadTxFlag } from '@tectra-ng/flags';
import { provideTxFlags, txFlagImages } from '@tectra-ng/ui/country';

providers: [provideTxFlags(txFlagImages(loadTxFlag))];

Brand logos come from Simple Icons (CC0) and are trademarks of their owners; flags are generated from flag-icons (MIT). Follow each brand's guidelines — most only allow a logo to point to that brand.

Next steps

Button Icons in buttons, alone or with a label.

Country A flag with the localized country name.

Theming Tokens, presets and your brand colours.