:global(.ring-icon) { margin: 8px; padding: 8px; } import React from 'react'; import {render} from 'react-dom'; import { SearchIcon, CheckmarkIcon, PencilIcon, PermissionIcon } from '@jetbrains/ring-ui/components/icon'; render( , document.getElementById('icon-container') ); render( , document.getElementById('icon-search') ); render( , document.getElementById('icon-16-pencil') ); render( , document.getElementById('icon-14-pencil') ); render( , document.getElementById('icon-custom-permission') );

All available icons are listed below. Place the cursor over an icon to see its name.

@value unit from '../global/global.css'; :global(.icon-example__container) { margin-left: calc(0 - calc(unit * 2)); } :global(.ring-icon) { margin: 8px; padding: 8px; color: var(--ring-link-color); } :global(.secondary) { fill: var(--ring-link-hover-color); } import React from 'react'; import {render} from 'react-dom'; import * as icons from '@jetbrains/ring-ui/components/icon/icons'; render(
{Object.values(icons).map(Icon => ( ))}
, document.getElementById('all-icons') );
:global(.ring-icon) { color: black; margin: 8px; padding: 8px; } import React from 'react'; import {render} from 'react-dom'; import * as logos from '@jetbrains/ring-ui/components/icon/logos'; render(
{Object.values(logos).map(Logo => ( ))}
, document.getElementById('logos') );